YouTubeの埋め込み動画のサイズを画面に合わせる方法

YouTube動画の埋め込みコードはサイズを指定できますが、固定サイズなのでスマートフォンで表示した場合にはみ出てしまうことがあります。そこで今回は、埋め込んだYouTube動画のサイズを画面に合わせて表示する方法を紹介します。

HTML

HTMLでは、埋め込みコード（iframe要素）をdiv要素で囲みます。

<div class="youtube-wrapper">
     <!-- 埋め込みコード（iframe） -->
</div>

CSS

CSSは以下のように設定します。

.youtube-wrapper {
    position: relative;
    padding-top: 56.25%;  /* 動画の縦横比 */
    padding-bottom: 30px; /* スライダー部分用スペース */
    overflow: hidden;
}
.youtube-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

これで、埋め込んだYouTubeの動画が、iframeを囲ったdivの親要素の横幅に合わせて表示されるようになります。