YouTube動画をWebサイトに埋め込む際、YouTubeの動画埋め込みコードを使うことが多いですが、そのまま挿入しても「思っていた表示のされ方と違う」と戸惑った経験はないでしょうか。
「埋め込みを試してみたけれど自力では上手くいかなかった。」そんな人の為に弊社が試した成功例を備忘録として残しておきます。ここで紹介する方法は、HTMLやCSSを触ったことのある人であれば問題なく再現できますので、まずはYouTubeが発行する埋め込みコードの構造から見ていきましょう。
各動画のタイトル横にある「…（3点リーダ）」から「共有」を選択し、「埋め込む」のボタンで生成された埋め込みコードをコピーすることができます。中身の例は以下。（2025年8月現在）
<iframe width="560" height="315" src="https://www.youtube.com/embed/Z7XG6UiAPGI?si=1ARrjYcGhFlghlvD" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
YouTubeの埋め込みコードではデフォルトでサイズが指定されています。「iframe」開始タグに記載されている「width」が横幅、「height」が縦幅です。
今回のYouTube動画埋め込みにあたり、検証した環境は以下です。
見出しにもある通り、サイズはwidth、heightどちらもpx（ピクセル）で指定するのが確実に成功する方法です。
まずは埋め込みコードからwidth、heightを削除します。
そして、CSSでwidth、heightを指定するため、お好きなクラスを設定します。
ここではクラスを「youtube__video」としました。
<iframe class="youtube__video" src="https://www.youtube.com/embed/5QZw8u0zeKg?si=ec7sf07CdBQEqudM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
加えて、固有のスタイルを当てたりページ内リンク（アンカーリンク）を適用したい場合は「id」も指定してあげると良いでしょう。
そしてCSSは以下のようにサイズを指定します。中央寄せしたい時には動画を「ブロック要素」にしてから「margin: auto;」を適用します。
.youtube__video {
display: block; /*中央寄せ用*/
margin: auto; /*中央寄せ用*/
width: 787px;
height: 442.69px;
}
この状態だと左右中央寄せにはなっていますが、上下の余白がないため、前後のセクションにくっ付いた見え方になります。その場合はこのCSSに上下のマージンを追加するか、前セクションにしたマージン、後セクションに上マージンを追加することで解消できます。
なお、この方法は一つの「iframe」タグと複数のスタイル指定でレスポンシブ化を行う方法です。
そのためPC、タブレット、スマートフォンそれぞれでサイズを変更したい時は「@media screen」を用いて、デバイス幅に合わせたサイズを指定し切り替えを行うと良いでしょう。
