404

我对标记相当陌生（尽管它非常容易上手）。我正在开发一个包，并试图让 wiki 页面看起来不错，作为帮助手册。我可以很容易地将 YouTube 视频链接插入 wiki 页面，但如何嵌入 YouTube 视频。我知道这可能是不可能的。

我已阅读您可以使用 HTML 标记，因此我尝试按此链接嵌入 HTML ，如下所示：

<object width="425" height="350">
  <param name="movie" value="http://www.youtube.com/user/wwwLoveWatercom?v=BTRN1YETpyg" />
  <param name="wmode" value="transparent" />
  <embed src="http://www.youtube.com/user/wwwLoveWatercom?v=BTRN1YETpyg"
         type="application/x-shockwave-flash"
         wmode="transparent" width="425" height="350" />
</object>

并保存了页面，但什么也没发生。

  1. 是否可以在 GitHub wiki 页面上嵌入 YouTube 视频？
  2. 如果有怎么办？
4

14 回答 14

636

无法直接嵌入视频，但您可以放置​​一个链接到 YouTube 视频的图片：

[![IMAGE ALT TEXT HERE](https://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg)](https://www.youtube.com/watch?v=YOUTUBE_VIDEO_ID_HERE)
于 2013-04-18T09:35:49.373 回答
360

完整示例

扩展@MGA的答案

虽然无法在 Markdown 中嵌入视频，但您可以通过在标记文件中包含有效的链接图像来“伪造”它，使用以下格式：

[![IMAGE ALT TEXT](http://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg)](http://www.youtube.com/watch?v=YOUTUBE_VIDEO_ID_HERE "Video Title")

降价的解释

如果此标记片段看起来很复杂，请将其分为两部分：


![image alt text](https://example.com/link-to-image)
包含在链接中的图像
[link text](https://example.com/my-link "link title")

使用有效 Markdown 和 YouTube 缩略图的示例：

一切都很棒

我们直接从 YouTube 获取缩略图图像并链接到实际视频，因此当人们单击图像/缩略图时，他们将被带到视频中。

代码：

[![Everything Is AWESOME](https://img.youtube.com/vi/StTqXEQ2l-Y/0.jpg)](https://www.youtube.com/watch?v=StTqXEQ2l-Y "Everything Is AWESOME")

或者，如果您想给读者一个视觉提示，即图像/缩略图实际上是一个可播放的视频，请在 YouTube 中拍摄您自己的视频屏幕截图并将其用作缩略图。

使用带有视频控件的屏幕截图作为视觉提示的示例：

一切都很棒

代码：

[![Everything Is AWESOME](http://i.imgur.com/Ot5DWAW.png)](https://youtu.be/StTqXEQ2l-Y?t=35s "Everything Is AWESOME")

 明显优势

虽然这需要几个额外的步骤（a）拍摄视频的屏幕截图和（b）上传它以便您可以将图像用作缩略图，但它确实具有3 个明显的优势：

  1. 阅读您的降价（或生成的 html 页面）的人有一个视觉提示，告诉他们他们可以观看视频（视频控件鼓励点击）
  2. 您可以选择视频中的特定帧用作缩略图（从而使您的内容更具吸引力）
  3. 您可以链接到视频中的特定时间，单击链接图像时将从该时间开始播放。（在我们的例子中，从 35 秒开始）

截取和上传屏幕截图需要几秒钟，但有很大的回报。

无处不在！

由于这是标准降价，它适用于任何地方。在 GitHub、Reddit、Ghost 和 Stack Overflow 上试用。

维密欧

这种方法也适用于 Vimeo 视频

例子

小红帽

代码

[![Little red riding hood](http://i.imgur.com/7YTMFQp.png)](https://vimeo.com/3514904 "Little red riding hood - Click to Watch!")

笔记：

于 2015-04-25T08:10:59.353 回答
52

Markdown 不正式支持视频嵌入，但您可以在其中嵌入原始 HTML。我使用GitHub Pages进行了测试，它完美无缺。

  1. 转到 YouTube 上的视频页面，然后单击分享按钮
  2. 选择嵌入
  3. 将 HTML 片段复制并粘贴到您的降价中

该片段看起来像：

    <iframe width="560" height="315"
src="https://www.youtube.com/embed/MUQfKFzIOeU" 
frameborder="0" 
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" 
allowfullscreen></iframe>

PS：你可以在这里查看实时预览

于 2019-01-16T01:11:50.500 回答
34

我创建了https://yt-embed.herokuapp.com/来简化这一点。从上面的示例中可以直接使用：

[![Everything Is AWESOME](https://yt-embed.herokuapp.com/embed?v=StTqXEQ2l-Y)](https://www.youtube.com/watch?v=StTqXEQ2l-Y "Everything Is AWESOME")

将导致：yt-embed 的使用示例

只需调用：https://yt-embed.herokuapp.com/embed?v=[video_id]作为图像而不是https://img.youtube.com/vi/。

于 2020-04-27T23:55:42.620 回答
14

如果你喜欢 HTML 标签而不是 markdown + 居中对齐：

<div align="center">
  <a href="https://www.youtube.com/watch?v=YOUTUBE_VIDEO_ID_HERE"><img src="https://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg" alt="IMAGE ALT TEXT"></a>
</div>

于 2017-10-30T16:57:31.830 回答
5

将视频与缩略图和链接居中对齐：

<div align="center">
      <a href="https://www.youtube.com/watch?v=StTqXEQ2l-Y">
     <img 
      src="https://img.youtube.com/vi/StTqXEQ2l-Y/0.jpg" 
      alt="Everything Is AWESOME" 
      style="width:100%;">
      </a>
    </div>

结果：

在此处输入图像描述

于 2020-02-12T10:30:14.780 回答
5

添加带有缩略图的链接（最初由 YouTube 使用）是一种可行的解决方案。YouTube 使用的缩略图可通过以下方式访问：

  • 如果官方视频链接是：https://www.youtube.com/watch?v=5yLzZikS15k
  • 那么缩略图是：https://img.youtube.com/vi/5yLzZikS15k/0.jpg

按照这个逻辑，下面的代码会产生完美的结果：

<div align="left">
      <a href="https://www.youtube.com/watch?v=5yLzZikS15k">
         <img src="https://img.youtube.com/vi/5yLzZikS15k/0.jpg" style="width:100%;">
      </a>
</div>

于 2020-07-19T13:34:11.157 回答
3

我编写了一个 Chrome 浏览器扩展程序xhub，它允许您在 GitHub 页面中嵌入 YouTube 视频（以及其他内容）。

在这里得到它。然后添加这样的东西

A video:
```youtube-embed
{
   "width": "560",
   "height": "315",
   "src": "https://www.youtube.com/embed/dQw4w9WgXcQ",
   "title": "YouTube video player",
   "frameborder": "0",
   "allow": "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
   "allowfullscreen": true
}
```

到您的降价代码。它给你

在此处输入图像描述

于 2021-12-06T18:19:26.437 回答
1

就我而言，作为一个技巧，我通过使用在线转换器将我的屏幕录制视频转换为 gif 遇到了这个问题，然后我将它添加到我的降价中，如下所示：

## Quick Overview of the project

![Functional Programming with Javascript using NASA API](./functionJsWithNasaAPI.gif)

结果如下图所示

检查此 repo以获取上述示例的实时预览。希望这个技巧可以帮助某人:)。

使用 gif 而不是在降价中使用不受支持的视频的示例

于 2021-07-08T04:59:05.870 回答
0

如果您尝试在 GitHub 页面上嵌入视频，您只需转到 youtube 视频，点击分享，复制嵌入代码（应该如下所示）

<iframe width="560" height="315" src="https://www.youtube.com/embed/Z7PExj_v-ZU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

并将其粘贴到您的降价页面。

于 2021-03-25T05:42:22.707 回答
0

实际上不仅是 youtube，使用一个小技巧，您可以上传任何视频，甚至可以直接从您的计算机上传。要做到这一点，

  • 您可以创建一个问题，只需将视频文件拖入其中
  • 我总是喜欢缩略图，为此，从视频中截取一张图片并像上一步一样拖动它
  • 你现在有两个urls来自视频和图像
  • 使用网址：[![img_tag](https://image-url.png)](https://video-url.mp4)
  • 例如，

IM1

  • 只需立即关闭问题（如果您愿意）
于 2021-09-02T09:25:25.107 回答
0

将我的 YouTube 视频 ID 替换为您的 YouTube 视频 ID

<a href="https://youtu.be/5xwHkLPgvtQ" title="Music Caster Video Demo">
  <p align="center">
    <img width="75%" src="https://img.youtube.com/vi/5xwHkLPgvtQ/maxresdefault.jpg" alt="Music Caster Video Demo Thumbnail"/>
  </p>
</a>


html {
  background: #2D2D2D;
}
<a href="https://youtu.be/5xwHkLPgvtQ" title="Music Caster Video Demo">
  <p align="center">
    <img width="75%" src="https://img.youtube.com/vi/5xwHkLPgvtQ/maxresdefault.jpg" alt="Music Caster Video Demo Thumbnail"/>
  </p>
</a>

现实世界的例子

于 2021-12-18T01:08:38.177 回答
-1

您可以尝试以下方法：

<iframe width="500" height="300" src="https://www.youtube.com/embed/<VIDEO_ID>" frameborder="0" allowfullscreen></iframe>
于 2021-03-14T11:01:04.797 回答
-1

现在（2021 年），您可以轻松地在 gitHub markdown 上使用视频。您只需在 Markdown 上粘贴纯视频 url，它将转换为视频。


To have a video on your markdown, just add the video url, some like this:

https://www.youtube.com/watch?v=G3Cytlicv8Y

您可以在此视频中看到有关此新功能的信息。

于 2021-12-30T11:55:26.487 回答