ページ内に埋め込んだyoutube動画をレスポンシブに対応させたい件

最近では、youtubeをページに埋め込むことが多くなってきたわけですが…。

また、サイトの傾向もレスポンシブ対応へのニーズも増えてきているわけです。

そこで問題となるのが、youtube動画を埋め込んだ際に、レスポンシブで画面が小さくなった際に、動画が飛び出て表示されてしまうという問題です。

youtubeでは、動画の横幅と高さを指定する記述がありますので、当然その数値が基準となります。

これを無くしてしまうと、今度は動画の画面比率の基準が無くなってしまいますので、動画のサイズが崩れてしまうという問題が発生します。

そこで、簡単に今埋め込んでいる動画をレスポンシブに対応させる方法です！

いたって簡単！

以下の内容をCSSに追加します。

.youtube_container {
 width: 100%;
 padding-top: 56.25%;
 position: relative;
}
.youtube_container iframe {
 width: 100% !important;
 height: 100% !important;
 position: absolute;
 top: 0;
 right: 0;
}

CSSに追加出来たら、今ある動画の記述部分を今回追加した.youtube_containerで囲ってあげればOKです。

<div class="youtube_container">
ここにiframeから始まるYoutubeの埋め込みURLを記述
</div>

といった感じです。

1つCSSに記述しておくと、今後の埋め込みがとても便利です！

YouTube 成功の実践法則53 著：木村 博史 参考価格：￥ 1,706 価格：\1,706