※2016/03/17 WordPressの埋め込み表示の仕様が変わったので、最新版に合わせてCSSを更新しました。最新の情報は下記の記事をご覧ください。
最近の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版での最大サイズです。コンテンツ幅に応じて変更してください。
↓レスポンシブの実装例。幅を縮めてみてください。
- YouTube
YouTube でお気に入りの動画や音楽を楽しみ、オリジナルのコンテンツをアップロードして友だちや家族、世界中の人たちと共有しましょう。
www.youtube.com
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の実装例です。