YouTubeやVimeoのiframe要素をレスポンシブに対応させるCSSとコードの取得方法

YouTubeやVimeoの動画をブログに埋め込むとき、取得したiframeの埋め込みコードにはwidthとheightが指定されているので、そのまま貼り付けるとサイズが固定されてしまってパソコンでは丁度いいけどスホマではみ出てしまうということがあります。
今回はiframeをdivで囲むだけでレスポンシブ対応してくれるCSSを紹介します。

ウィンドウ幅に合わせて表示サイズが可変する

レスポンシブ対応させたiframe

上のGIFアニメを見て分かる通り、ウィンドウ幅に合わせて埋め込んだ動画の表示サイズが変わります。常に横幅いっぱいに表示されアスペクト比も固定されます。

レスポンシブ対応させるCSS

今回使用するコードは以下の記事で紹介されていたものを使用しています。

HTMLは取得したiframeコード（2行目）をdivで囲みます。

</div>

CSSはこのようになります。

.youtube-container {

position: relative;

padding-bottom: 56.25%;

padding-top: 30px;

height: 0;

overflow: hidden;

}

.youtube-container iframe {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

ここで気をつけたいのがpadding-bottom: 56.25%;という部分。ここでアスペクト比（縦横比）を指定しています。
計算方法はHD動画（16:9）の場合100÷16×9=56.25% のようになります。

アスペクト比はpaddingのtopでもbottomでもどちらでもOKです。上記ではpadding-top: 30px;としていますが、これはなくても大丈夫です。正確に言うと付けるとアスペクト比が崩れますが上下に黒い線が表示されるのでデザイン的な意味合いで付けてます。

iframe要素のオリジナルサイズ（横幅&高さ）からアスペクト比を算出してpadding設定します。 padding-topでもpadding-bottomでもどちらでもOKです。 HD動画（16:9）の場合は、100 / 16 * 9 = 56.25% となります。
via iframe要素（Youtubeなど）のレスポンシブ対応 | HTML5/CSS3, JavaScript 次世代WEB研究開発

iframeコードを取得する

iframeの埋め込みコードを使ったことがないという人のために「YouTube」「Vimeo」「Flickr」のコードの取得方法を紹介します。

「YouTube」の場合は動画のタイトルの下あたりに[共有]があるのでクリック、[埋め込みコード]を選択するとiframeコードを取得できます。
YouTubeでコードを取得する

「Vimeo」の場合は動画の右上に紙飛行機のマークがあるのでクリックします。
紙飛行機のマークをクリック

[Embed]からiframeコードが取得できます。
Embedからコードを取得

「Flickr」の場合は写真を選択したら矢印のマークをクリック、[HTML]を選択するとiframeコードが取得できます。
Flickrのコードを取得する
Flickrの場合iframeで取得するとスライドショーのような形で表示されてしまうので、1枚だけ表示させたい時には[Embed]から[HTML]に変更しましょう。

またそれぞれオプションが用意されているので表示を変えたり関連動画を再生後に表示させたりすることもできます。

CSSはコピペでできますしHTMLもdivで囲むだけなので簡単に使うことができます。
YouTubeなどの動画はたまにしか使わないという人も多いと思いますが、いつでも使えるようにCSSだけでも用意しておくといいですね。

Feedlyで購読する Twitterで購読する