web-dev-qa-db-ja.com

YouTubeビデオを埋め込む

私はマークアップがかなり初心者です（ただし、ピックアップは非常に簡単です）。私はパッケージに取り組んでおり、Wikiページをヘルプマニュアルとして見栄え良くしようとしています。 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. もしそうならどのように？
videogithubyoutubeembedmarkdown
219
Tyler Rinker

ビデオを直接埋め込むことはできませんが、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)

詳細については、 こちら をご覧ください。シンプルに保ちたい場合は、次の構文を使用してリンクにします。

[linkname](https://youtubevideourl)

355
MGA

完全な例

@ MGAの答えを展開する

Markdownでビデオをembedすることはできませんが、「fake it "を含めることにより、有効なlink-image 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")

マークダウンの説明

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

画像
![image alt text](http//example.io/link-to-image)
リンクに包まれました
[link text](http//example.io/my-link "link title")

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

Everything Is AWESOME

YouTubeからthumbnail画像を直接に取得し、実際の動画にリンクしているため、ユーザーが画像をクリックすると/ thumbnail彼らはビデオに連れて行かれます。

コード：

[![Everything Is AWESOME](https://img.youtube.com/vi/StTqXEQ2l-Y/0.jpg)](https://www.youtube.com/watch?v=StTqXEQ2l-Y "Everything Is AWESOME")

または読者に提供したい場合visual cueサムネイルは実際にはplayableビデオであり、YouTubeでビデオの独自のスクリーンショットを撮り、代わりにサムネイルとして使用します。

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

Everything Is AWESOME

コード：

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

Clear利点

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

  1. あなたのマークダウンを読んでいる人（または結果のhtmlページ）にはvisual cueがあり、ビデオを見ることができると伝えています（ビデオコントロールをクリックすることをお勧めします）
  2. ビデオでサムネイルとして使用する特定のフレームを選択できます（したがって、コンテンツを作成しますより魅力的な）
  3. 特定の時間へのリンクは、リンクされた画像がクリックされたときに再生が開始されるビデオで使用できます。 （この例では35秒から）

スクリーンショットを取るには

どこでも動作します！

これは100％Standard markdownであるため、workseverywhere ... GitHub、Redit、Ghost、およびもちろんStackOverflowで！

ヴィメオ

このアプローチはVimeoビデオでも機能します

例

Little red ridning hood

コード

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

ノート：

222
nelsonic

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

  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： ここでライブプレビュー を確認できます

15
Daksh Shah

マークダウン+中央揃え以外の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>
5
Ivan Berezanskiy

@MGAと@nelsonicの回答を拡張し、必要なマークダウンを取得しやすくすることを試みています。

上記の提案を取り入れ、Youtube URLといくつかの画像Alt Textを取り込んで、Github ReadMeに貼り付けることができるMarkDownリンク画像を返す小さなClay関数にまとめました： https： //www.clay.run/services/nicoslepicos/github-create-video-embed-mock/code

@nelsonicが示唆するように、ビデオプレーヤーコントロールを備えたもので動作します。

1
nicoslepicos