スマートフォンなどへの対策として、Youtubeのiframeをレスポンシブ対応させるCSSとして、よく紹介されているのは、iframeをdivなりで囲っておいて、そのdivにposition: relativeとpaddingでアスペクト比に合わせたパーセントを指定。そのうえでiframeにposition: absoluteを設定する方法です。

例えばこんな感じで。

HAM MEDIA MEMO

Youtube動画の埋め込みをCSSでレスポンシブ対応する方法

このCSSに対する具体的な方法論の解説はここでは差し控えますが、

WordPressではビジュアルエディタにYoutubeのURLを貼り付けると、自動的にiframeのタグが発行されるわけですが、ちゃんとclassつきのspanタグが発行されているのですが、そのclassをよく忘れるので備忘録としてメモ。

 

とりあえずYoutubeのURLをぺろっと貼ってみた

ものは試し、というわけでYoutubeのURLをそのまま貼り付けてみます。

一応、このブログもスマホ対応の一環として、今回紹介しているようなことをやっているので、多分レスポンシブなはず！（個人ブログなのをいいことにブレイクポイントが少ないのがバレる！！！）

愛すべき友人達がやっているTHE MOJAH BANDのわさびのPVをyoutubeからぺろっと。

こんなHTMLが書き出されます

本来は一行で書き出されるのですが、視認性がひどいので改行とインデントを入れてありますが・・・

<p>
  <span class='embed-youtube' style='text-align:center; display: block;'>
    <iframe class='youtube-player' type='text/html' width='640' height='390' src='http://www.youtube.com/embed/2oZYCFu2QKo?version=3&#038;rel=1&#038;fs=1&#038;showsearch=0&#038;showinfo=1&#038;iv_load_policy=1&#038;wmode=transparent' frameborder='0' allowfullscreen='true'>
    </iframe>
  </span>
</p>

はい。こんなHTMLが書き出されております。
インラインでCSSも書かれていますね。
spanタグかー、と思っていたらきっちりブロックレベル要素になっているようです。
なので、さくっとこのままCSSを当ててみましょう。

 

こんなCSSを追加すれば良いのではないだろうか

前述のブログ記事のCSSをちょっとだけ改変したものが以下となります。

span.embed-youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

span.embed-youtube iframe.youtube-player {
 position: absolute;
 top: 0;
 right: 0;
 width: 100% !important;
 height: 100% !important;
}

正直iframeはここまで明示的にする必要はないのですけども。

まるっとこれでいけるのではないでしょうか！

WordPressでYoutubeをよく貼り付ける人は是非設定してみてください。