youtubeをレスポンシブwebデザインに対応させるCSS
公開日:2013年7月16日

スマホで見た時に画面からはみ出てしまっていたyoutubeのサイズをうまく幅に合わせるためのCSS
いつからか不明ですが、本記事の方法が効かなくなってました。
上記のサイト様の方法でyoutubeをレスポンシブ対応にできました。
当ブログでもたまに登場する関連動画のyoutube
サイト全体はレスポンシブwebデザインに対応しているのにyoutubeの部分(iframe)はスマホで見ても大きいままで画面の幅からはみ出ている状態でした。
どうせiPhoneはブラウザではなく別アプリが立ち上がって再生されるので放置してましたが、ちょっと手を加えてスマホサイズで表示されるようにしました。(もちろん再生は別アプリなので機能的に意味があるわけではありません)
参考にしたのは下記のサイト
このサイトは素晴らしいですね。自分も「しょう」に力をいれて発音してしまうくらい、いろいろ勉強させてもらってます。(見れば何言ってるのかわかると思います。)
ifameをレスポンシブ対応にしよう
youtubeはiframeで表示させてます。なのでiframeをcssで加工してやればいいのですが、ちょっとしたHackが必要だそうです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.related-video { position: relative; height: 0; padding-top: 56.25%; width: auto; } .related-video iframe { height: 100%; position: absolute; left:0; top:0; width:100%; } |
上記cssの「.related-video」の部分は適宜変更してください。iframe全体にこのCSSが適用されると(AdSenseなど)不具合がでるかもしれませんので、iframeの前にclass名を付けました。
4行目の56.25%は、縦÷横です。当ブログの場合動画サイズは、縦225px、横400pxなので、225/400=0.5625なので、このようにしました。違う縦横比の動画を貼る時はその時考えます。

現在私は、ドットインストールでPHPを基本から勉強してます。
PHPで作られたオープンソースの問い合わせフォームに「メールアドレスチェック機能」をソース手書きで追加するくらいはできるのですが、それがスマートか否か判断できかねます。
というわけでプログラミングの基礎を学ぶのと同時に自社webサービスを構築中です。
カテゴリー:ホームページ制作 » HTML/CSS/JS
作成者:けん