如何在 GitHub wiki 页面上嵌入 YouTube 视频？

Question

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

我已阅读您可以使用 HTML 标记，因此我尝试按照 link 嵌入 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. 如果有怎么办？

Answer 1

无法直接嵌入视频，但您可以放置​​一个链接到 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)

• 有关 Markdown 的更多信息，请查看 GitHub 上的 this Markdown cheatsheet。
• 有关 Youtube 图片链接的更多信息look this question。

Answer 2

完整示例

扩展 @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")

Markdown 的解释

如果这个标记 sn-p 看起来很复杂，把它分成两部分：

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

截取和上传屏幕截图需要几秒钟，但收益很大。

无处不在！

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

Vimeo

这种方法也适用于 Vimeo 视频

示例

代码

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

注意事项：

• 如何截图：http://www.take-a-screenshot.org/（所有平台）
• 上传缩略图：截取屏幕截图后，您可以将其拖放到imgur.com 进行上传并立即将其用作缩略图
• YouTube 缩略图信息：How do I get a YouTube video thumbnail from the YouTube API?

Answer 3

如果你更喜欢 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>

Answer 4

Markdown 不官方支持视频嵌入，但您可以在其中嵌入原始 HTML。我用 GitHub Pages 进行了测试，它运行良好。

1. 转到 YouTube 上的视频页面并点击分享按钮
2. 选择嵌入
3. 复制 HTML sn-p 并将其粘贴到您的 markdown 中

sn-p 看起来像：

    <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：您可以查看live preview here

Answer 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>

结果：

Answer 6

我创建了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")

将导致：

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

Answer 7

添加带有缩略图的链接（最初由 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>

Answer 8

您可以尝试以下方法：

<iframe width="500" height="300" src="https://www.youtube.com/embed/<VIDEO_ID>" frameborder="0" allowfullscreen></iframe>

Answer 9

如果您尝试在 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>

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

Answer 10

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

## Quick Overview of the project

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

结果如下图所示

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

Answer 11

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

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

• 现在只需关闭问题（如果需要）

Answer 12

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

获取它here。然后添加类似这样的内容

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
}
```

到您的降价代码。它给你

Answer 13

用您的 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>

Real World Example

Answer 14

现在（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

您可以在this video 上查看有关此新功能的信息。