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

Article views61 VIEW

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

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

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

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


まずCSSに記述

そしてHTMLにて

を記述。

これで実装完了。

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

Pocket
pinit fg en rect gray 28 - Wordpress Youtubeの埋め込みをレスポンシブに
line88x20 - Wordpress Youtubeの埋め込みをレスポンシブに
[`evernote` not found]

Leave a Comment

CAPTCHA