ifameタグのサイズを変えるCSSをレスポンシブwebデザインに応用

公開日：2013年7月16日　

当ブログでもたまに登場する関連動画のyoutube
サイト全体はレスポンシブwebデザインに対応しているのにyoutubeの部分（iframe）はスマホで見ても大きいままで画面の幅からはみ出ている状態でした。

どうせiPhoneはブラウザではなく別アプリが立ち上がって再生されるので放置してましたが、ちょっと手を加えてスマホサイズで表示されるようにしました。（もちろん再生は別アプリなので機能的に意味があるわけではありません）
参考にしたのは下記のサイト

ドットインストール「レスポンシブなウェブサイトをつくろう」

このサイトは素晴らしいですね。自分も「しょう」に力をいれて発音してしまうくらい、いろいろ勉強させてもらってます。（見れば何言ってるのかわかると思います。）

ifameをレスポンシブ対応にしよう

youtubeはiframeで表示させてます。なのでiframeをcssで加工してやればいいのですが、ちょっとしたHackが必要だそうです。

上記cssの「.related-video」の部分は適宜変更してください。iframe全体にこのCSSが適用されると（AdSenseなど）不具合がでるかもしれませんので、iframeの前にclass名を付けました。

4行目の56.25%は、縦÷横です。当ブログの場合動画サイズは、縦225px、横400pxなので、225/400=0.5625なので、このようにしました。違う縦横比の動画を貼る時はその時考えます。

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

ドットインストール