Youtubeなどの埋め込みiframe動画をレスポンシブ対応にするCSSコード

サイトなどにYoutube動画のiframe要素をそのまま埋め込むとスマホなどでページにアクセスしても可変されない。
横スクロールが発生したり、動画のサイズに合わせて表示されその周りのフォントが縮小されたりする。
CSSで簡単にiframe要素をレスポンシブ対応にする方法をお伝えする。

Youtubeなどiframe要素をCSSでレスポンシブ対応にする方法

以下はclass属性を「flex-video」としている例です。

.flex-video {
    height: 0;
    margin-bottom: 1rem;
    overflow: hidden;
    padding-bottom: 67.5%;
    padding-top: 1.5625rem;
    position: relative
}

positionプロパティーは、要素の配置方法を指定します。
relative値は、相対位置。
absolute値は、絶対位置。

overflowプロパティーは、ボックスの範囲内にその内容が入りきらなかった場合、はみ出た部分の表示をどう処理するかを指定します。
hidden値は、はみ出た部分を表示しません。

htmlでYoutubeなど動画埋め込みiframe要素をDivタグで囲む

CSSの準備ができたら、あとは記事内に埋め込むYoutubeのiframe要素をdivタグで囲み、class属性に先ほどCSSで指定した属性名(ここではflex-videoとした)を入れる。

<div class="flex-video">
<iframe width="560" height="315" src="https://www.youtube.com/○○/○○○" frameborder="0" allowfullscreen></iframe>
</div>

まとめ

もはやデバイスに合わせて最適化するレスポンシブデザインは当たり前になってきています。