【WordPress】YouTubeを綺麗に埋め込む方法

どうも、おぎくぼです。

今回はWordPressで作成したサイトにYouTubeの動画を埋め込む方法について紹介します。

WordPressの自作テーマではそのまま埋め込むと表示が綺麗ではないので、この記事を読んで改善しましょう!

YouTubeを埋め込んでみる

まずは何もせずにYouTubeを埋め込んでみましょう。

pcだとこんな感じ。余白があるけどそんなに悪くない。

少し見にくいですが、スマホだと切れてしまいます。これはダサい。

原因

原因はデフォルトのコードにあります。

*1行のコードですが見やすいように改行しました。

デベロッパーツールで動画の部分を調べるとこのようなコードがあります。

このiframeにはスタイルが当てられています。

こんな感じです。この幅と高さはどのディバイスサイズでも固定されてしまうのでダサくなってしまうのです。

ではこのコードを上書きして、幅はディバイスサイズにあわせていっぱいに、高さは幅に合わせていい感じにしてみましょう。

解決策

まずはiframeの親要素に以下のコードを追加してください。

次は子要素であるiframeに以下のコードを追加してください。

完了です。もうこれでバッチリ表示されていると思います。簡単ですね。

pc、スマホ共にいい感じにできました。やったー!

以上です。

ではまた。