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

WordPressでは、プラグインを使わなくてもYouTubeやVimeoのURLを本文中に書くだけで、自動的に動画を表示することができます。

しかし、テーマによっては、スマホなど小さな画面で表示したときに、動画がコンテンツエリアからはみ出してしまうことがあります。

今回は、YouTubeやVimeoで小さな画面でもレスポンシブ表示するCSSを紹介します。

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

実装はとても簡単で、下記のCSSを追加するだけです。

iframe {
  width: 100%;
}

使用しているテーマによっては、max-width: 100%;を指定してもいいと思います。

↓ブラウザの横幅を縮めて、レスポンシブ表示を確認できます。YouTubeです。

↓Vimeoも問題ありません。