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

Total 695 views
この記事の所要時間は約 3分です。

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

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

スポンサーリンク


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

 

中でも一番手軽で一番多いのは、やっぱり YouTube 動画でしょうか。
私もたまにコードを引っ張ってきます。

 

キャプチャ画像

 

ところがですよ。

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

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

キャプチャ画像

 

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

実はこの状態でも、画面をクリックすると動画は自動的に横幅に合わせてきちんと再生されます。

ただ画面の情報が半分ぐらいしか見えてないので、 場合によっては『ただのリサイズに失敗した画像』と勘違いされて見過ごされてしまう可能性もあります。

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

な~んか私の知ってるやり方では全く通用しないんですわ。^^ゞ
(あわてて G.先生にお伺いを立てたところです)

 

原理がいまいちよくわかりませんが問題なしなので 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 のところに書けばいいでしょう。

で、結果がコレ。

キャプチャ画像

 

追記 -2013.7.20-

『css で iframe{width:100%;} って指定すれば簡単に解消できるよ~』という記事を見つけました。
実際に充ててみた結果が下の画像です。

キャプチャ画像

両サイドをトリミングしての横幅合わせで、ま、確かにこれでも問題ないと言えば問題ないですね。

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

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

CSS は奥が深い!

スポンサーリンク

ブログランキングに参加してます。よろしければポチッとな。

お気軽にフォロー↓してください。

ブログ更新情報はこちらからどうぞ。

follow us in feedly

2件のコメント

  • たんきち

    こんばんは、たんきちと申します。

    CSSって本当に難しいですよね。
    動画のレスポンシブ対応参考にさせていただきます。

    またおじゃましますので、今後とよろしくお願いします。
    応援ぽちっとな!

    • きゅいじん

      たんきちさん、こんばんは。きゅいじんです。
      応援ぽち、ありがとうございます。こちらこそよろしくどうぞ。

1件のトラックバック

  • YouTube動画をブログでレスポンシブ対応にした手順メモ
    2015/03/20 20:56

    […] […]

コメントを残す




日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)