ブログは文章と絵で成り立っていますが、ここに動画があるととても動きのあるブログになります。訪問者に見てもらえば、内容の理解も深まります。ブロガーとしては滞在時間が増えたり、回遊性もよくなります。ついでにアイキャッチにもなります。
YouTubeを始めたら、ブログにも埋め込みたくなるのが人情です。もちろん私もその一人。
YouTube:daus lab music&furniture
当方のブログはワードプレスで作成、テーマはcocoonです。
ブログにYouTubeを埋め込む方法を解説していきます。
投稿にYouTube動画を埋め込む
■YouTubeでの作業
動画リストのマークをクリックして、

「共有」を選択します。

もしくは、埋め込みたい動画を開いて、「共有」を選択します。

「埋め込む」をクリックします。
(TwitterやFacebookの場合は、そのアイコンをクリックします)

右側に表示されているコードをコピーします。

■ワードプレスでの作業
ワードプレスの投稿の埋め込みたい位置にカスタムHTMLを挿入して、

コピーしたコードをペーストします。

プレビューで表示されることを確認します。

画面幅いっぱいに表示する
このままだと、サイズが小さく見にくいのと、スマホでは見切れる可能性もあるので、
- レシポンシブで
- 画面比率を壊さずに
- 画面幅いっぱい
になるように整えます。
埋め込みで使用されるYouTubeプレイヤーのサイズは標準でwidth=560 height=315です。これはYouTubeの画像サイズ16:9のアスペクト比になっています。

コードを貼り付けたカスタムHTMLを開きます。
<iframe width="560" height="315" src="https://www.youtube.com/embed/vupbAp8b2PY?si=9jPTJPnqSVR52eoo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
HTMLでこのように iframe を div で挟みます(赤塗り部分 コピペしてお使いください)
<div class="youtube">
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/vupbAp8b2PY?si=AW52bCXC9E1in97i" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></div>
</div>
投稿画面を下書き保存しておいて、追加CSSを開きます。

下記のCSSを追加します(コピペしてお使いください)
/*youtube埋め込み横幅いっぱい*/
.youtube{
position: relative;
width: 100%;
overflow: hidden;
padding-bottom: 56.25%;
}
.youtube iframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none; /*境界線の打ち消し*/
}
これで出来上がりです。
このCSSのおかげで、以降、追加するYouTubeの埋め込みは全て画面いっぱいに表示されます。
カスタムHTMLのプレビューだと変わっていない場合がありますが、新しいタブでプレビューで見ると画面幅いっぱいになっているはずです。
指定した場所にYouTube動画を埋め込む
ウィジェットを使えばサイドバーやコンテンツ下部、フッター上など指定の場所にYouTube動画を埋め込みます。
サイドバーに埋め込みたい場合は、
外観→ウィジェット
利用できるウィジェットのリストからカスタムHTMLを選択し、サイドバーにドラッグして挿入します。

カスタムHTMLのタイトルを入力し(なしでも可)内容に埋め込みコードを貼り付けます。

埋め込みコードはHTMLでこのように iframe を div で挟めば、
<div class="youtube">
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/vupbAp8b2PY?si=AW52bCXC9E1in97i" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></div>
</div>
先ほどの「投稿にYouTube動画を埋め込む」の際に、追加CSSに記入しておいたこちらのCSSが効いて、
/*youtube埋め込み横幅いっぱい*/
.youtube{
position: relative;
width: 100%;
overflow: hidden;
padding-bottom: 56.25%;
}
.youtube iframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none; /*境界線の打ち消し*/
}
サイドバーの幅いっぱいに表示されます。

YouTube動画のリンクを埋め込む
埋め込みではなく、リンクを貼る付けることも可能です。
動画リストのマークをクリックして、

「共有」を選択します。

もしくは、埋め込みたい動画を開いて、「共有」を選択します。

「コピー」をクリックしてリンクをコピーします。
(TwitterやFacebookの場合は、そのアイコンをクリックします)

ワードプレスを開いて、コピーしたリンクを貼り付けます。
左寄せ、中央揃えなど調整が可能です。
YouTube動画の埋め込みと規約
埋め込み型 YouTube プレーヤーにより YouTube 動画を表示することはYouTubeによって認められています。
埋め込みコードを利用さえすれば、基本的にはすべてのYouTube動画を表示することができます。あくまで、「埋め込み」が認められているのであって、「ダウンロードして表示する事」は認められていません。
許可と制限事項
YouTube 利用規約
お客様は、本契約および適用される法律を遵守する限り、本サービスにアクセスして利用できます。お客様は個人的で、非営利目的の用途でコンテンツを視聴できます。また、埋め込み型 YouTube プレーヤーに YouTube 動画を表示させることもできます。
埋め込みであっても注意したいのは、そもそもの動画自体が規約違反である場合です。この場合、埋め込んだ側も規約違反になる可能性があります。
まとめ
- YouTubeには便利な埋め込み機能が用意されている
- 埋め込み動画はHTMLとCSSで簡単に調整ができる
- 埋め込み動画はYouTube規約で認められている
ありがとうございました。