嵌入YouTube视频

Question

我对标记很新(虽然它非常容易拾取).我正在开发一个软件包,并试图让wiki页面看起来很好看作为帮助手册.我可以很容易地将YouTube视频链接插入维基页面,但如何嵌入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 wikim页面上嵌入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)

欲了解更多信息,看这里.如果您想保持简单,只需使用以下语法将其设为链接:

[![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)

Answer 2

完整的例子

扩展@MGA的答案

虽然无法在Markdown中嵌入视频,但您可以使用以下格式在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的解释

如果此降价代码段看起来很复杂,请将其分为两部分:

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

使用有效降价和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中截取您自己的视频截图,并将其用作缩略图.

使用视频控件作为Visual Cue的屏幕截图的示例:

码:

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

 明显的优势

虽然这需要一些额外的步骤(a)拍摄视频的屏幕截图,然后(b)上传它,这样您就可以将图像用作缩略图,它有三个明显的优势:

1. 阅读降价标记(或生成的HTML页面)的人有一个视觉提示,告诉他们可以观看视频(视频控件鼓励点击)
2. 您可以在视频中选择一个特定的框架作为缩略图(从而使您的内容更具吸引力)
3. 您可以链接到视频中的特定时间,点击链接图像时将从该时间开始播放.(在我们的情况下从35秒)

拍摄截图需要

无处不在!

由于这是100%标准降价,它可以在任何地方使用 ...在GitHub,Redit,Ghost上尝试它,当然也可以在StackOverflow 上试试!

Vimeo的

这种方法也适用于Vimeo视频

例

码

[![Little red ridning 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缩略图信息:如何从YouTube API获取YouTube视频缩略图？

Answer 3

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

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

1. 转到YouTube上的“视频”页面，然后单击“共享”按钮
2. 选择嵌入
3. 在markdown中复制并粘贴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：您可以在此处查看实时预览

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

Answer 6

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

2022 年 10 月更新

为什么这么辛苦？

github.com 允许将图像和视频拖放到问题和 PR 中。

如果您README.md在 github.com 上编辑并将 MP4 拖放到页面中，您将获得一个带音频的嵌入式视频播放器（GIF 则无法获得）。

有大小限制...我认为以这种方式上传的资源是 100 MB。

巨大优势

• MP4 不在.git存储库中，因此不会影响克隆速度或本地存储库大小
• 不涉及其他服务（没有 YouTube，没有第三部分应用程序）
• 音频（GIF 很棒……但是我们今天不去看无声电影是有原因的）

演示时间

https://github.com/huntaro/video-test

Answer 8

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

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

结果：