46
26

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

YouTubeの動画をQiita記事に埋め込んでみた

Last updated at Posted at 2021-03-11

記事内で動画再生できるようになった?

Qiita更新情報ページ 2021-03-11

今までは、YouTubeを記事内に置く方法はサムネール写真があって、それをクリックするとYouTubeに遷移する方法しかなかったため、ただの写真かな?と思われてクリックはされづらかったかと思います。
もしくは、動画付きTwitter埋め込みでした。

できました!

記事書き途中のプレビューでも再生できるようになってます!

Image from Gyazo

安心!!

ライブ配信の埋め込みはどうなるかな

同じようにできます!

埋め込み方法

Image from Gyazo

埋め込みたいYouTubeを右クリックし、「埋め込みコードをコピー」をクリック

Qiitaの記事記入欄でペーストすると

<iframe width="1254" height="641" src="https://www.youtube.com/embed/5qap5aO4i9A" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

このようなiframeタグを挿入し、上記のようにプレビューで動画が見えるようになっていればOKです

追記

iframe内の「width="〇〇"」ここの数値を変更すると大きさ変更できます。
実際に記事で見るときや、特にスマートフォンで見るときはでかすぎるので、100%とするのがおすすめです。(heightは400くらい)

<iframe width="100%" height="400" src="https://www.youtube.com/embed/5qap5aO4i9A" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

さらに追記

再生時間を指定しての埋め込みもできました!

<iframe width="100%" height="400" src="https://www.youtube.com/embed/XMsWBgNbuU0?t=2778" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Image from Gyazo

YouTubeでは現時点のURLをコピーできます。
例えば画像のやつですとこんなURLが取得できます。

https://youtu.be/XMsWBgNbuU0?t=2778

この?t=2778が再生位置を表すパラメータになっているので、これを埋め込みのsrc=のところにあるURLを末尾に追加してあげるとできました!

「現時点の埋め込みコードをコピー」なんて項目がでたら一発なんですけどねぇ

感想

簡単にできるようになってうれしいです!
過去の記事も更新していこうかと思うくらいいいアップデートだったなと思いました!

46
26
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
46
26

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?