【40代からの起業】ブログにYouTube動画を埋め込む

ブログは文章と絵で成り立っていますが、ここに動画があるととても動きのあるブログになります。訪問者に見てもらえば、内容の理解も深まります。ブロガーとしては滞在時間が増えたり、回遊性もよくなります。ついでにアイキャッチにもなります。

YouTubeを始めたら、ブログにも埋め込みたくなるのが人情です。もちろん私もその一人。

YouTube：daus lab music&furniture

当方のブログはワードプレスで作成、テーマはcocoonです。
ブログにYouTubeを埋め込む方法を解説していきます。

投稿にYouTube動画を埋め込む
画面幅いっぱいに表示する
指定した場所にYouTube動画を埋め込む
YouTube動画のリンクを埋め込む
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; /*境界線の打ち消し*/
}

サイドバーの幅いっぱいに表示されます。