WordPressでは、プラグインを使わなくてもYouTubeやVimeoのURLを本文中に書くだけで、自動的に動画を表示することができます。
しかし、テーマによっては、スマホなど小さな画面で表示したときに、動画がコンテンツエリアからはみ出してしまうことがあります。
今回は、YouTubeやVimeoで小さな画面でもレスポンシブ表示するCSSを紹介します。
WordPressの埋め込み機能でYoutube、Vimeoをレスポンシブ表示する方法
実装はとても簡単で、下記のCSSを追加するだけです。
iframe {
width: 100%;
}
使用しているテーマによっては、max-width: 100%;を指定してもいいと思います。
↓ブラウザの横幅を縮めて、レスポンシブ表示を確認できます。YouTubeです。
- YouTube
YouTube でお気に入りの動画や音楽を楽しみ、オリジナルのコンテンツをアップロードして友だちや家族、世界中の人たちと共有しましょう。
www.youtube.com
↓Vimeoも問題ありません。