Youtubeの埋め込み動画を可変（レスポンシブ）にする方法

YouTube動画を埋め込んでいるサイトやブログをよく見かけます。

ところがYoutubeの動画をそのままWEBサイトやブログに埋め込むと固定幅で表示され須スマホで可変になってくれません。

かりにiframeのwidthとheightを100%にすると可変になりますが上下が切れてしまったり比率を保ったままの可変になりません。

今回は、WEBサイトやブログに埋め込むYoutube動画を可変対応したいときの方法を紹介していきたいと思います。

サイトやブログにYoutube動画を埋め込むことは今後も増えてくると思うので覚えておいて損はないです。

Youtubeの埋め込み

まずはYouTubeから埋め込むためのコードを取得しましょう。

手順①

埋め込みしたい動画の下にある「共有」をクリックします。

手順②

共有が開かれたら「埋め込む」をクリックします。

手順③

iframeタグの埋め込みコードが表示されるので「コピー」をクリックしてWEBサイトやブログに貼り付けます。

デフォルトでiframeタグにwidthとheightが設定されています。

デフォルトのままだと固定幅なので下記がレスポンシブにするための方法になります。

YouTube埋め込み動画を可変（レスポンシブ化）させる方法

htmlソース

<div class="video">
/*Youtubeの埋め込みのコード*/
</div>

Youtubeの埋め込みのコードをコピーして貼り付けてdivタグで囲みます。クラス名はとりあえずvideoとします。

css

.video{
        width: 100%;
        position: relative;
        padding-top: 56.25%;
}

.video iframe{
        width: 100% !important;
        height: 100% !important;
        position: absolute;
        top: 0;
        right: 0;
}

クラス名videoのpadding-topにはアスペクト比（16:9）のときの縦横比を入れます。

以上でYouTube動画がレスポンシブ化されました。