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

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

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

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

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

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

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

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

↓Vimeoも問題ありません。

人気の記事

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

コメント

  • Posted on
  • Views 1,082