WordPressでYouTube、Vimeo動画をレスポンシブ対応させるためのCSS

2016.01.20

※2016/03/17 WordPressの埋め込み表示の仕様が変わったので、最新版に合わせてCSSを更新しました。最新の情報は下記の記事をご覧ください。

最近のWordPressは、プラグインを使わなくても、記事の中にYouTubeのURLを書くだけで、自動的に動画を表示してくれます。

ただし、テーマがYouTube動画のレスポンシブに対応していないと、スマホ版で見た時に、PC版のサイズのまま表示されてしまいます。

目次

YouTube

レスポンシブ対応させるやり方はいろいろありますが、一番簡単なのはCSSに下記を追記する方法です。

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

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

「max-width: 650px;」の部分は、PC版での最大サイズです。コンテンツ幅に応じて変更してください。

↓レスポンシブの実装例。幅を縮めてみてください。

YouTube
作成した動画を友だち、家族、世界中の人たちと共有
www.youtube.com

Vimeo

Vimeoの動画もよく使うので、Vimeo用のCSSも用意しました。Vimeoはデフォルトだと小さく表示されてしまいますね。

div.embed-vimeo {
  position: relative;
  width: 100%;
  max-width: 650px;
  padding-top: 56.25%;
}

div.embed-vimeo iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}

↓Vimeoの実装例です。