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

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

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

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

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

スポンサーリンク

YouTube

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

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

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

Vimeo

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

↓Vimeoの実装例です。

スポンサーリンク

みんなが見ている人気記事

コメントを投稿する

  • Posted on 2016.01.20
  • Views 1,003