そういえば YouTube 動画のレスポンシブウェブデザイン対応、まだやってませんでした

レビューサイトや物販サイトなどで、商品を詳しく見せるために動画リンクを貼ることはよくあることでしょう。

動画はサイト滞在時間を増やす意味でも重要です。

訪問者のサイト滞在時間が少しでも増えればSEO的にも有利になりますし、商品への興味を持ってもらえばクリック率の向上にもつながりますからね。

YouTubeの可変幅設定はテンプレート次第

中でも一番手軽で一番多いのは、やっぱりYouTube動画でしょうか。

私もたまにコードを引っ張ってきます。

 

ところがですよ。

久しぶりにPC用に貼ったYouTube動画をiPhoneで見たところ、表示がかなりおかしなことになってるのにたまたま気付いちゃったんです。

具体的にはこんな感じです。

YouTube動画のレスポンシブウェブデザイン対策ってとうの昔に済ませているもんだと勘違いしていたのですが、実は何にも手を付けてなかったというオチです。

すぐに考えうる対策を講じたんですが、なんかいつもと様子が違うようで…。

な～んか私の知ってるやり方では全く通用しないんですわ。

原理がいまいちよくわかりませんが問題なしなのでOK

YouTube動画はiframeという枠で囲まれてます。

これがクセモノでした。

以前からiframeはそのカスタマイズが面倒くさかったんですが、やっぱりここでも同じだったというわけです。

で G.先生に伺ったらすぐにヒットしましたよ。

ちゃちゃっと実装しちゃいましょう。

実装

YouTubeの埋め込みコードをコピーすると「<iframe width="640" height="360" src="http://www.youtube.com/embed/......></iframe>」といったコードがコピーできます。

まずはこれらをあとで制御できるように<div>でくくっちゃいます。

今回は「doga」というクラス名を付与してみました。

実際のコードがこちら↓になります。

続いてCSSです。

今回はあまり細かい説明はしません。

絶対配置（position: absolute;）と相対配置（position: relative;）の説明なんて、初心者の方にはなんのこっちゃ？みたいな感じでしょうからそのままコピっちゃってください。

数値なども固定で統一ですし。

実際のCSSがこちら↓です。

（!important指定は好みですが付けておいた方が確実かもしれません）

これらをどこに書くかですが、iPhoneだけで表示が崩れるのならスマホ用CSSのところに書けばいいでしょう。

で、結果がコレ。

YouTube動画の位置や余白等を調整したいときは、上記CSSコードの前にこんな感じでCSSを書いておけば大丈夫。

調べてみてわかったことは、私もやっぱりまだまだだなぁとということでした。

CSSは奥が深い！