みなさんこんにちは、ぽんずです！
今回は、
【WordPressブログにYouTubeの動画を埋め込む方法】
について解説したいと思います。
ちなみに、埋め込みに成功すると以下のように表示されます。
・動画のレイアウトをスマホのサイズにも対応させる方法
(レスポンシブ対応)
・スマホの画面で動画がレイアウトからはみ出して困っている人
それではさっそく解説していきたいと思います！
ブログ記事にYouTubeの動画を埋め込む方法
①埋め込みたいYouTube動画をパソコンで表示する
まずは、YouTubeで埋め込みたい動画を開きましょう。
今回は、例として僕が好きな猫の動画を埋め込みたいと思います。
画像のように動画を表示したら右下の共有をクリックします。
②動画右下の【共有】から【埋め込む】をクリック
共有をクリックすると下の画像のように表示されるので、赤枠の「埋め込む」をクリックします。
「コピー」ではなく「埋め込む」なので、間違えないように気をつけましょう。
③表示されたHTMLコードをコピーする
埋め込むをクリックするとこのようにHTMLコードが表示されるので、右下からそれをコピーします。
コピーしたら、ブログに戻ります。
④ブログ記事に戻りHTMLコードを張り付ける
先ほどコピーしたコードを張り付ければ動画が表示されます。
コードの張り付け方はこんな感じです。
（※コード表示のために多少崩しています）
<p>< iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/hEhBCKeYLqM” frameborder=”0″ allow=”accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture” allowfullscreen=”” ></ p>
以上で、動画の埋め込みが完了になります。
意外と簡単なんだね！
埋め込んだ動画をレスポンシブ対応にするやり方
【最初に】レスポンシブ対応とは？
そもそもレスポンシブ対応ってなんだろう…？
ということで、レスポンシブ対応について簡単に説明すると、、
今回の場合は、YouTube動画のサイズをスマホでも違和感なく調整しよう、です。
【最初に】なんでレスポンシブ対応にするの？
いきなり画像サイズをレスポンシブ対応にすると言われても、
いやいや、ちゃんと動画の埋め込みできたじゃん
と思うかもしれません。
ですが、百聞は一見に如かず。これを見てください。
これは、この記事をスマホで見たものになります。
あえてレスポンシブ対応をせず普通に動画を埋め込みました。
レイアウトから大きくはみ出していて違和感がありますよね？
レスポンシブ対応は、これをすっきりレイアウト内に収めるためにやります。
というわけでさっそくやっていきましょう！
①YouTubeからコピーしたHTMLコードを<div>で囲む
先ほどの動画のHTMLコードを<div>で囲みます。
<div class="movie">
<iframe width="560" height="315" src="https://www.youtube.com/embed/hEhBCKeYLqM" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
</div>
<div class=”movie”>動画のコード</div>という感じです。
②以下のCSSを追加する
<div>で囲むだけではなく、cssの追加も必要になります。
以下のcssコードを追加することで、レスポンシブ対応されます。
cssもコピペで大丈夫なので、難しいことはないですよ。
width: 100%;
padding-top: 56.25%;
}
.movie iframe {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
}
CSSコードを追加したらレスポンシブ対応されてちゃんと表示されるはずなので、スマホで確認してみましょう。
③スマホで動画がレスポンシブ対応されているか確認する
上記を踏まえて動画を埋め込むと、以下のようになります。
（スマホで見ると分かります）
ちゃんとレイアウト内に収まっているのが分かりますね！
まとめ
今回の内容は、
・ブログにYouTube動画を埋め込む方法
・埋め込んだ動画をレスポンシブ対応にするやり方
でした。
動画を埋め込むと記事内容の伝わりやすさや分かりやすさが増すと思うので、この機会に積極的に動画を埋め込んでみてくださいね！
それではっ！
【謝辞】
・MASATOMさんのチャンネル（猫の動画）
猫ちゃんが可愛いので是非見てみてくださいね～