WordPressでレスポンシブデザインのテーマを使用していると、ブラウザの幅に合わせて、画像のサイズを自動で最適化してくれる。
ただ、画像ではなくYouTubeやVimeoの動画を本文中に埋め込む場合、サイズが自動で変わらないので、スマホ閲覧時に右側に大きくはみ出してしまう。具体的には下記のような状態で、再生はできるものの、あまり見た目がよくない。
スタイルシートにコードを追記
通常の場合は、スタイルシート（style.css）に下記を追記し、本文中の埋め込みコードを<div class=”video-container”>と</div>で挟めば、解決する。
.video-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
}.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
ただ、現在使用しているテーマではうまくいかず（他のテーマでは問題なかった）、原因を調べていたところ、そもそも元からスタイルシートに別の指定がされていたからだった（英語なのでよくわからなかったが、スタイルシート的には対応済みだった）。
うまくいかなかった場合の対処法
もしうまくいかなかった場合は、上記のような記述がすでにスタイルシートにないか、「iframe」で検索するなどして調べてみるといいだろう。あった場合は、「video-container」にあたる箇所をメモ。本文中で埋め込みコードを挟む<div class=”video-container”>の「video-container」をメモしたものに差し替えれば、うまくいくはずだ。
実際に動画を埋め込むと、下記のようにブラウザの幅に合わせて大きさが変わる。ちなみに、埋め込んでいるのは5月27日発売の新刊のPV。
埋め込み動画のレスポンシブ対応は、調べればさまざまなやり方が出てくるが、おそらくこの方法が一番シンプルなのでは。
