WordPress Youtubeの埋め込みをレスポンシブに

Article views45 VIEW

blue-jHPをレスポンシブで作成した際、埋め込んだYoutubeの大きさが変わらずスマートフォンで見ると横にはみ出てしまう。

かといってiframeのwidthを100%にしても高さがそのままなので縦に長くなってしまう。

何とか縦横比を保ったままレスポンシブにならないかとネットを探していたらコードを見つけて実装。

なんとCSSとdivだけで実現できました。マジか。 


まずCSSに記述

そしてHTMLにて

を記述。

これで実装完了。

参考にしたサイト
http://www.doghands.com/wordpress/responsive-videos/ 

この記事が気に入ったら
いいね ! しよう

Twitter で
Pocket
LINEで送る

Leave a Comment

CAPTCHA