如何在GitHub维基页面上嵌入YouTube视频?

我对标记并不熟悉(尽管它非常容易掌握)。我正在做一个包，并试图让维基页面看起来很好作为一个帮助手册。我可以插入一个YouTube视频链接到维基页面相当容易，但我如何嵌入一个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. 如果是，怎么做?
235997 次浏览
小开
最佳答案

直接嵌入视频是不可能的，但你可以放一个链接到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)
小开

完整的示例

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

使用有效Markdown和YouTube缩略图的例子:

Everything Is AWESOME

我们直接从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上，并使用它作为缩略图。

使用截图和视频控件作为视觉提示的例子:

< a href = " https://youtu.be/StTqXEQ2l-Y?t=35s" rel="noreferrer" title="Everything Is AWESOME">Everything Is AWESOME

代码:

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

< em > < / em >优势

虽然这需要几个额外的步骤(一个) 截图的视频和(b) 上传它，所以你可以使用图像作为你的缩略图，它确实有3 clear优势:

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

注:

小开

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

小开

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

  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:你可以检查现场预览

小开

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

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

结果:

enter image description here

小开

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

将导致: y -embed

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

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

小开

你可以尝试以下方法:

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

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

然后把它粘贴到你的降价页面。

小开

在我的情况下，作为一个技巧，我遇到了这个问题，将我的屏幕录制的视频转换成一个gif使用在线转换器，然后我把它添加到我的markdown如下:

## Quick Overview of the project


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

结果如下图所示

检查这种回购上面的例子的现场预览。 希望这个技巧可以帮助到一些人:).

使用gif而不是使用markdown中不支持的视频的例子

小开

实际上不只是youtube，使用一个小技巧你可以上传任何视频，甚至直接从你的电脑。要做到这一点，

  • 你可以创建一个问题并简单地将视频文件拖进去
  • 我总是喜欢缩略图，这样做，快照一个图片从视频和拖动它像前一步
  • 你现在有两个urls从视频和图像
  • 使用url: [![img_tag](https://image-url.png)](https://video-url.mp4)
  • 例如,

im1

  • 现在只需关闭问题(如果你想)
小开

我写了一个Chrome浏览器扩展，xhub，它允许你在GitHub页面中嵌入YouTube视频(和其他东西)。

Get it 在这里。然后加上这样的东西

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

你的降价代码。它给你

enter image description here

小开

用你的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年)，你可以轻松地在gitHub上使用视频。你只需要把普通的视频url粘贴到你的markdown上，它就会转换成视频。


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


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

你可以在这个视频上看到这个新特性。

小开

我创建一个api，让你这样做! 你可以去这个网站来生成它或使用api。这个api也允许你设置大小!文档 < / p > 

[![ALT](https://youtube-md.vercel.app/VIDEO-ID)](https://www.youtube.com/watch?v=VIDEO-ID)

例子:

[![Rick Astley - Never Gonna Give You Up (Official Music Video)](https://youtube-md.vercel.app/dQw4w9WgXcQ/640/360)](https://www.youtube.com/watch?v=dQw4w9WgXcQ)

Rick Astley - Never Gonna Give You Up(官方音乐视频) < / >

小开

2022年10月更新

为什么这么努力工作?

Github.com允许拖放图像&视频变成议题和pr。

如果你在github.com上编辑你的README.md，并将一个MP4拖拽到页面中，你会得到一个嵌入音频的视频播放器(这是GIF没有的)。

有尺寸限制……我认为这是100mb的资产上传这种方式。

巨大的优势

  • MP4不在.git回购中，因此不会影响克隆速度或本地回购大小
  • 不涉及其他服务(没有YouTube，没有第三方应用程序)
  • 音频(动图很棒……但我们今天不去看默片是有原因的)

演示时间

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

小开

我做了一个API，添加了一个漂亮的播放按钮，和一个背景。为了使它可点击，你可以这样使用它:

[![](https://markdown-videos.deta.dev/youtube/{video_id})](https://youtu.be/{video_id})

例子:

< a href = " https://youtu。be/dQw4w9WgXcQ" rel="nofollow noreferrer"> .

源代码可以在这里找到:https://github.com/Snailedlt/Markdown-Videos


提交答案