レスポンシブデザインが流行している昨今
会社の都合というか、なんかアレでサイト制作というよりめっぽう、LP(ランディングページ/レターページ)を制作することが多い自分ですが
案件によってはレスポンシブでマルチデバイス対応したセールスレターページ、ランディングページを意識して作ることもしばし、あります
まぁそこは軽く「スマホでも見れるようにね～＾＾」程度のラフな指示なんですが後学のため、気まぐれでレスポンシブ実装させていただいております笑
そもそも自分の考えなのですがLPだとかいったものは、結果的にプロダクトの良さを推しコンバージョンに繋げるものなので
(そのために一部マイナスな表現を用いたりはしますが)
「購入する！」や「無料相談」のボタンまでは削れるセクションなんてほとんど存在しないのですね。
なので、普通にコーディングしていって、デバイスごとの縮小で画面に納めてもらう→タップで拡大という形のページが多いんだと思います。
つまり、LPはレスポンシブで表示を制御する必要があるかも微妙なところなのです 独断
事実、移動中にスマートフォンで、サクッと上陸(ランディング)されてしまうことなんてきっと日常茶飯事でしょう
そこでページが重ければ離脱しますし、片手がふさがってピンチズームできなかったりしても同じでしょうね。
結局「微妙なところ」に行き着くジレンマです。
実は今までのが前置きだったのですが
レスポンシブデザイン+アルファ！Youtube埋め込みも画面幅にフィット
今回は、アプローチの手法として定番の「動画」
Youtube動画 × レスポンシブ です。メモ程度に…。
Youtube動画の埋め込みタグって大きさを指定しますよね。それだとコンテンツの幅によりけりで切れたりして
なんかダサいんですよね
デバイスやコンテンツ幅に応じ可変するには、下記のようなタグを用意します。
で、このframe-wrapには、PC用として高さを任意で指定しましょう。
.frame-wrap { /*PC表示時*/ margin: 30px 0; height: 500px; }幅はどっちでもいいと思います。
別にauto; でも 100%; でも、適宜に応じてお好きなように
で、iframeもCSSで制御ッ！
iframe { /*動画が親要素にフィット*/ width:100%; height:100%; }心配な方はclass付加で限定的にしましょう。
さらにこんなのもあるとスマホで観たときにちょうど良い大きさになります。
@media screen and (max-width: 480px) { /*スマホ表示用*/ .iframe-wrap{height: 300px;} }
メディアクエリを指定していないと、PC表示用に指定した高さのまま横幅だけ縮小されますので
どこかのブレークポイントで高さ指定を変更した方がよさそうです。
いかがでしょう、これでスマホでも気持ち良く動画がみれます＾＾
ちなみに、前回の記事ですが、こんな感じにメインコンテンツ幅にフィットします。
なにもLPに限ったことではなく
会社のサイトのメインカラムに動画を掲載なさっている方も、
導入してみてはいかがでしょうか？
では
