video - YouTubeビデオをGitHubwikiページに埋め込むにはどうすればよいですか？

Question

私はマークアップにかなり慣れていません（ピックアップは非常に簡単ですが）。私はパッケージに取り組んでおり、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>

そしてページを保存しましたが、何も起こりませんでした。

GitHub wikiページにYouTubeビデオを埋め込むことは可能ですか？
もしそうなら、どのように？

score 636 · Accepted Answer

動画を直接埋め込むことはできませんが、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のこのMarkdownチートシートを参照してください。
Youtube画像リンクの詳細については、この質問を参照してください。

score 360 · Accepted Answer

完全な例

@MGAの回答を拡張する

マークダウンにビデオを埋め込むことはできませんが、次の形式を使用して、マークアップファイルに有効なリンクされた画像を含めることで「偽造」することができます。

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

値下げの説明

このマークアップスニペットが複雑に見える場合は、次の2つの部分に分けてください。

![image alt text](https://example.com/link-to-image)
リンクに包まれた画像
[link text](https://example.com/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でビデオの独自のスクリーンショットを撮り、代わりにそれをサムネイルとして使用します。

ビジュアルキューとしてビデオコントロールを使用したスクリーンショットの使用例：

コード：

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

明確な利点

これには、（ a）ビデオのスクリーンショットを撮り、（ b）サムネイルとして画像を使用できるようにアップロードするという、いくつかの追加の手順が必要ですが、 3つの明らかな利点があります。

あなたのマークダウン（または結果のhtmlページ）を読んでいる人は、彼らがビデオを見ることができることを彼らに伝える視覚的な合図を持っています（ビデオコントロールはクリックを奨励します）
サムネイルとして使用するビデオ内の特定のフレームを選択できます（したがって、コンテンツがより魅力的になります）
リンクされた画像がクリックされたときに再生が開始されるビデオ内の特定の時間にリンクすることができます。（この場合は35秒から）

スクリーンショットの撮影とアップロードには数秒かかりますが、大きな見返りがあります。

どこでも動作します！

これは標準の値下げであるため、どこでも機能します。GitHub、Reddit、Ghost、そしてここStackOverflowで試してみてください。

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サムネイル情報：YouTube APIからYouTubeビデオサムネイルを取得するにはどうすればよいですか？

score 52 · Accepted Answer

Markdownは公式にはビデオの埋め込みをサポートしていませんが、生のHTMLを埋め込むことができます。GitHub Pagesでテストしたところ、問題なく動作しました。

YouTubeのビデオページに移動し、共有ボタンをクリックします
埋め込みを選択
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：ここでライブプレビューをチェックできます

score 34 · Accepted Answer

これを簡素化するために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://img.youtube.com/vi/の代わりに、画像としてhttps://yt-embed.herokuapp.com/embed?v=[video_id]に電話をかけるだけです。

score 14 · Accepted Answer

マークダウン+中央揃えよりも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>

score 5 · Accepted Answer

ビデオをサムネイルとリンクで中央揃えにします。

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

結果：

score 5 · Accepted Answer

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

score 3 · Accepted Answer

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

マークダウンコードに。それはあなたに与えます

score 1 · Accepted Answer

私の場合、トリックとして、画面に記録されたビデオをオンラインコンバーターを使用してgifに変換することでこの問題が発生し、次のようにマークダウンに追加しました。

## Quick Overview of the project

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

下の画像の結果は次のようになりました

上記の例のライブプレビューについては、このリポジトリを確認してください。このトリックが誰かを助けるかもしれないことを願っています:)。

score 0 · Accepted Answer

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>

マークダウンページに貼り付けます。

score 0 · Accepted Answer

実際には、YouTubeだけでなく、ちょっとしたトリックを使用して、コンピューターから直接でも、任意のビデオをアップロードできます。そのためには、

課題を作成して、その中にビデオファイルをドラッグするだけです。
私はいつもサムネイルを好みます、そうするために、ビデオから写真をスナップショットして、前のステップのようにそれをドラッグします
urlsビデオと画像から2つあります
次のようにURLを使用します。[![img_tag](https://image-url.png)](https://video-url.mp4)
例えば、

今すぐ問題を閉じてください（必要な場合）

score 0 · Accepted Answer

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

実例

score -1 · Accepted Answer

次のことを試すことができます。

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

score -1 · Accepted Answer

現在（2021年）、gitHubマークダウンでビデオを簡単に使用できます。マークダウンにプレーンなビデオURLを貼り付けるだけで、ビデオに変換されます。


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

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

この新機能については、このビデオで見ることができます。

video - YouTubeビデオをGitHubwikiページに埋め込むにはどうすればよいですか？

14 に答える 14

完全な例

値下げの説明

有効なマークダウンとYouTubeサムネイルの使用例：

コード：

ビジュアルキューとしてビデオコントロールを使用したスクリーンショットの使用例：

コード：

明確な利点

どこでも動作します！

Vimeo

例

コード

ノート：

Related

Reference