YouTubeをレスポンシブ対応で埋め込む方法【CSSで動画サイズ自動調整】

ブログやWebサイトにYouTube動画を埋め込むとき、画面サイズによって動画の幅や高さが崩れてしまうことがあります。そこで便利なのが、レスポンシブ対応のCSSです。この方法を使うと、PC・タブレット・スマホに合わせて動画が自動でサイズ調整されます。

1 使うCSSの説明

.youtube {
    clear: both;          /* 浮動要素をクリア */
    position: relative;    /* iframeの絶対配置用に親要素を相対位置に */
    padding-bottom: 56.25%; /* 16:9 のアスペクト比を維持 */
    height: 0;             /* 高さを0にしてpaddingで比率を決定 */
    overflow: hidden;      /* はみ出す部分を非表示 */
    margin-top: 60px;      /* 上の余白 */
    margin-bottom: 20px;   /* 下の余白 */
}
.youtube iframe,
.youtube object,
.youtube embed {
    position: absolute;    /* 親要素に対して絶対配置 */
    top: 0;
    left: 0;
    width: 100%;           /* 幅を親要素いっぱいに */
    height: 100%;          /* 高さを親要素いっぱいに */
}

2 HTMLでの使い方

実際にYouTube動画を埋め込む場合は、次のようにします：

<div class="youtube">
  <iframe src="https://www.youtube.com/embed/動画ID" frameborder="0" allowfullscreen></iframe>
</div>

ポイント：

• 親要素に .youtube クラスを付けることで、動画の幅と高さが自動で調整されます。
• padding-bottom: 56.25% は 16:9 のアスペクト比を維持するための値です。
• iframe の width と height は 100% にして、親要素いっぱいに広げます。
• レスポンシブ対応なので、スマホやタブレットでも画面幅に合わせて自動で動画サイズが変わります。

3 まとめ

この方法を使えば、CSSだけで簡単にYouTube動画をレスポンシブ対応にできます。ブログ記事やWebサイトで動画を埋め込む際は、ぜひ .youtube クラスを活用してみてください。