完成示例

Question

我对标记很新（虽然它非常容易拾取）。我正在开发一个软件包，并试图让wiki页面看起来很好看作为帮助手册。我可以很容易地将YouTube视频链接插入维基页面，但如何嵌入YouTube视频。这可能是不可能的。

我看过你可以使用HTML标签，所以我尝试使用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>

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

是否可以在github wikim页面上嵌入YouTube视频？
如果是这样的话？

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)

有关详细信息，请查看here。如果您想保持简单，只需使用以下语法将其设为链接：

[linkname](https://youtubevideourl)

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

或如果您想为读者提供 视觉提示 ，那么图片/缩略图实际上是< em>可播放视频，在YouTube中截取视频截图，并将其用作缩略图。

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

代码：

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

清除优势

虽然这需要一些额外的步骤（一个）获取视频的屏幕截图（ b ）上传它因此您可以将图片用作缩略图，它具有 3 清除优势：

阅读降价标记的人（或生成的HTML页面）有一个视觉提示，告诉他们可以观看视频（视频控件鼓励点击）

您可以在视频中选择特定框架作为缩略图（从而使您的内容更具吸引力）

您可以链接到视频中的特定时间，点击链接图片时将从该视频开始播放。（在我们的情况下从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缩略图信息：How do I get a YouTube video thumbnail from the YouTube API?

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

将导致： example of usage of yt-embed

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

Answer 4

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

转到YouTube上的“视频”页面，然后单击“共享”按钮
选择嵌入
在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：您可以签出live preview here

Answer 5

如果你喜欢HTML标签而不是降价+中心对齐：

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

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

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

扩展@MGA和@ nelsonic的答案，并试图让它成为一个更容易获得所需的降价。

我接受了上面提到的建议，并把它放在一个小的Clay函数中，它接收一个Youtube URL和一些Image Alt Text并返回一个MarkDown链接图像，你可以将它粘贴到你的Github自述文件中：{{3 }}

将按照@nelsonic

的建议，对具有视频播放器控制权的人进行操作

Answer 8

添加最初由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 9

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

## Quick Overview of the project

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

结果如下图

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

Answer 10

嗨，在这个例子中，我尝试使用图像作为缩略图和视频链接

 [![IMAGE ALT TEXT HERE](https://cdn.pixabay.com/photo/2017/11/12/12/20/christmas- 
 2942305_960_720.jpg)](https://youtu.be/PyCvl-pdDp0)

Answer 11

您可以尝试以下操作：

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

Answer 12

如果你想在 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 13

我们可以在Markdown中使用html代码。
从support.google.com/youtube

Embed a video or playlist

div

选中more tips, tricks about youtube

Answer 14

我使用iframe按如下方式嵌入YouTube视频：

<div align="center">
    <iframe width="620" height="315"
        src="https://www.youtube.com/embed/OhlVBpEnjig">
    </iframe>
</div>

嵌入YouTube视频

14 个答案:

完成示例

Markdown

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

代码：

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

代码：

清除优势

无处不在！

的Vimeo

实施例

代码

注意：