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

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

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

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

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

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


まずCSSに記述

そしてHTMLにて

を記述。

これで実装完了。

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

Share

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA