Back to top

Embed videos in articles with just a Youtube address

例えばブログを書いている時に、動画を貼り付けると説明が簡単に済みます。 あるいは、聞いてほしい音楽があった時にそれを貼るといちいちYoutubeにアクセスしないでもすぐに聞けます。

ただYoutubeの動画を記事中にたくさん置くとページの読み込みなどが重くなります。

考え方としてはもう10年近く前からありますが(少なくても僕は2015年にこの最初のプログラムを作りました)、 未だに重いサイトは広告とYoutubeのそのままの埋込でいっぱいです。

使い方

使い方は簡単です。必要なスクリプトとCSSを用意して、記事の中に

https://www.youtube.com/watch?v=xxxxxxxxxxxと言うアドレスをdivで囲み、classをytpとするだけで以下のような表示になります。

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

このようにサムネイルで表示されて、クリックすると動画がiframeで同じ場所に読み込まれます。
これであればサムネイルの画像を読み込むだけなのでサイトも軽く表示され、必要なものだけ再生ができるようになります。

Youtubeの共有ボタンのアドレス

Youtubeの動画の下にあるシェアボタンのアドレスであるhttps://youtu.be/o0Kp8ZPVggUでも 動画のIDは同じことなので同様に表示されます。スクリプト上では多少異なりますが同じ処理をしています。

【MMD】メイコ姉によるスネーキーモンキー蛇拳OPの再現～完成！

https://youtu.be/o0Kp8ZPVggU

上の動画は、

<p>【MMD】メイコ姉によるスネーキーモンキー蛇拳OPの再現～完成！</p>
<div class="ytp">https://youtu.be/o0Kp8ZPVggU</div>

このように書かれています。

動画のサイズと右寄せ・左寄せ

https://youtu.be/6c1BThu95d8

例えば、小さなサムネイルで記事の横に動画を入れたい時もあるかと思います。そう言う場合は、こんな感じに書くこともできます。
左があればもちろん右もあります。センターもあります。

この時のコードは、

                    <div class="ytp size-s f-right">https://youtu.be/6c1BThu95d8</div>
何かしらの文章など

サイズは、

  • size-s: w 200px

  • size-m: w 400px

になっていて、

  • f-left: サムネイルを左に回り込ませます

  • f-right: サムネイルを右に回り込ませます

  • center: サムネイルの左右にmargin-left: auto; margin-right: auto; を入れます

cssで変更は可能ですが、初期設定ではmax-widthが42.5emの時に100%表示になります。

Codepen

Codepenで作っていたものも貼っておきます。

See the Pen Youtube address convert to embed iframe by Hidekichi (@Hidekichi) on CodePen.

狭い画面だと全て幅が100%で表示されると思います。