YouTubeなどiframe要素をレスポンシブデザイン対応する方法

2013/02/09

前回の「LinkWithinをレスポンシブデザインに対応する方法」に続いて、「dotinstall」の「レスポンシブなウェブサイトを作ろう」で勉強したことを活かして、nishi19 breaking newsでレスポンシブデザインに対応しきれていなかった箇所の修正を行いましたので、まとめておきます。

YouTubeの動画がスマートフォンでみると、横が切れてしまっている。

レスポンシブデザインを導入しているWebサイトが多くなりましたが、Youtubeのようにiframeタグを用いて読み込む要素は、提供させるHTMLをそのまま適用した場合、スマートフォンで表示させると、途中で切れてしまいます。

動画が途中で切れてしまっている。
動画が途中で切れてしまっている。

解決策

まず、iframeで表示させているエリアをdivタグで囲ってあげます。

HTML(変更前)

<iframe width="420" height="315" src="http://www.youtube.com/embed/qMxWCEMTYGk?rel=0" frameborder="0" allowfullscreen></iframe>

HTML(変更後)

<div class="iframeWrap">
<iframe width="420" height="315" src="http://www.youtube.com/embed/qMxWCEMTYGk?rel=0" frameborder="0" allowfullscreen></iframe>
</div>

次にCSSを調整します。
CSSの調整方法ですが、「position: relative」と「position: absolute」を使って表示位置を調整します。「position: relative」は親要素にかかるCSSなので、「div.iframeWrap」に記載します。relativeをかけた要素の中でabsoluteを使った場合は、relativeかけた要素(inframeWrap)の左上を0 0を座標の起点とし、表示位置が調整されます。したがって、PCからスマートフォンのように、表示する画面サイズが変わっても、起点と起点に対する表示サイズの比率(%)が指定されているので、画面サイズの変更にあわせて、表示する画面サイズが変更されるようになります。

また、「padding-top: 56.25%;」と指定するのは、iframeで表示する箇所のサイズの比率を「16:9」とする場合、100 / 16 * 9 = 56.25% と指定すると、画面の縦幅を基準に「16.9」の比率に調整されます。iframe内の横幅と高さは100%としているので、画面サイズが変わると、iframeで表示する箇所のサイズも変わります。

CSS

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

div.iframeWrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

修正を適用するとこんな見た目になります。

動画が切れずに画面内に収まっている。
動画が切れずに画面内に収まっている。

参考記事

最初は自分で書いてみたのですが、思い通り動かなかったので、こちらの記事を参考にしました。
ありがとうございます!

おすすめ商品

今回の修正を機に、以下の様な本を買って、本格的に勉強しようかなぁと思った次第です。