YouTubeをはじめとしたiframe動画ですが、普通にサイトに貼り付けるとブラウザの幅を縮めた際に縮小されず、レスポンシブ対応しているサイトの場合はうまく表示してくれない…という状況になります。そんな時には、今回紹介するiframe動画のレスポンシブ対応させる方法を活用してみてください(^^)
iframe動画をレスポンシブ対応させた際の動作として以下のデモページを作成しました。
デモページ
1. レスポンシブ対応させるためのソース
まずソースとしては以下のように記述してあげます。
2 | <iframe width="420" height="315" src="https://www.youtube.com/embed/RxMPb9q5kp4" frameborder="0" allowfullscreen></iframe> |
上の見本ソースのように、iframeのコードを<div>～</div>で括ってあげましょう。今回はクラス名dougaでiframe動画を括っていますが、ID名やクラス名はご自身の好きなもので構いません。
2. CSSを設定する
続いて、以下のようにCSSを適応してあげます。
このようにiframe動画を括っているdivに対してposition: relativeを設定し、padding-top: 56.25%を設定します。そして、iframe動画の幅を決めてあげます(今回はwidth: 50%と設定しました)。
次にiframeに対して、position: absoluteを設定し、width: 100%で動画の幅を.dougaで設定した幅いっぱいに表示させます。
続いて動画の縦幅も100%と設定しておきましょう。
そして最後に、too: 0を設定してあげます。これを設定しないと、.dougaで設定したpadding-topが引き継がれてしまい、上に空間が空いてしまいます。それをこのtop: 0で上の空間の隙間を0にしてあげます。
まとめ
以上のようにHTMLソースとCSSを記述してあげることで、iframe動画をレスポンシブ対応させることが可能になります！動画をレスポンシブ対応させれれば、サイトやブログでiframe動画を載せた時もブラウザ幅に対してキレイに縮小・拡大してくれるようになるので、是非とも活用しましょう！
