こんにちは、ふかふかです！
ホームページにYoutubeの動画を埋め込んで再生できるようにしたのはいいものの、スマホなどで表示した際に、動画の横幅が画面サイズに合わなくてはみ出てしまう！...なんてことになったりはしていませんか？
そんな時でも大丈夫！今回紹介する簡単な解決方法を用いれば、Youtube動画を様々なデバイスにレスポンシブ対応(サイズ対応)させることができます！
Youtube埋め込みコードの記述
Youtubeの動画を埋め込む際、Youtube動画ページの"共有"→"埋め込みコード"をコピーして張り付けてますが、そのときのコードは以下のような感じになっていると思います。
コード例(編集前)：
＜iframe width="560" height="315" src="https://www.youtube.com/embed/aThCr0PsyuA" frameborder="0" allowfullscreen>＜/iframe＞
width(横幅)とheight(縦幅)があらかじめ指定されていますね。
レスポンシブに対応させるためには、widthを"100%"、heightを"auto"にしてください。
また、CSSの方でも編集を行うために、埋め込みコード全体を適当な属性を付けた＜div＞＜/div＞で囲んでおいてください(私の場合は"youtube"というクラス属性を与えています)。
コード例(編集後)：
＜div class="youtube"＞
＜iframe width="100%" height="auto" src="https://www.youtube.com/embed/aThCr0PsyuA" frameborder="0" allowfullscreen>＜/iframe＞
＜/div＞
CSSの編集
次に、上で埋め込みコードに割り当てた属性のCSSを編集します。
と言っても、CSSに以下のコードをコピーして貼り付けてるだけでOKです。
.youtube {
position: relative;
height: 0;
padding: 30px 0 56.25%;
overflow: hidden;
}
.youtube iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
※.youtubeの部分は、自身が上で指定した属性に合わせてください。
以上で作業は完了です！
これで様々なデバイスの横幅に応じて、Youtube動画のサイズが変化すると思います。きちんとレスポンシブになっているかどうか、ご自身で確認してみてくださいね！
