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

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

WordPressの埋め込み機能でYouTube、Vimeoをレスポンシブ表示する方法
WordPressの埋め込み機能でYouTube、Vimeoをレスポンシブ表示する方法

最近の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版での最大サイズです。コンテンツ幅に応じて変更してください。

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

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の実装例です。

WordPressテーマの人気記事

2017年、人気の無料WordPressテーマ100選
2017年、人気の無料WordPressテーマ100選
2017年におすすめしたい、日本語対応の有料WordPressテーマ10選
2017年におすすめしたい、日本語対応の有料WordPressテーマ10選
アドセンス運用に最適なWordPressテーマ3選
アドセンス運用に最適なWordPressテーマ3選

コメント

  • Posted on
  • Updated on
  • Views 1,976