loading
 読み込み中...
ウェブの触手-日々の生活に新たなスパイスを-
Home > [Wordpress] > そういえば YouTube 動画のレスポンシブウェブデザイン対応、まだやってませんでした
この記事は約3分で読めます。
この記事は最終更新日から3年以上経過しているため現状にそぐわない可能性もあります。

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

投稿日:2013.7.16

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

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

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

 

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

 

ところがですよ。

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

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

キャプチャ画像

 

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

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

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

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

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

SIRIUSレビューイメージ画像

原理がいまいちよくわかりませんが問題なしなので 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 は奥が深い!

記事はお役にたてましたか?

記事にご興味をもっていただけましたら
下のソーシャルボタンで共有していただけると嬉しいです^^

 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

スポンサーリンク

おススメTCDテーマ

WordPressテーマ「IZM(TCD034)」

コメント(3件)

  • YouTube動画をブログでレスポンシブ対応にした手順メモ より:

    […] […]

  • たんきち より:

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

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

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

    • きゅいじん より:

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

コメントをどうぞ

入力いただいたメールアドレスは公開されません。
個人情報などを記入された場合、投稿いただいたコメントの該当箇所を編集して公開するか、もしくは非公開にします。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

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

先頭へ