スポンサーリンク

Pocket

WordPressでレスポンシブデザインのテーマを使用していると、ブラウザの幅に合わせて、画像のサイズを自動で最適化してくれる。

ただ、画像ではなくYouTubeやVimeoの動画を本文中に埋め込む場合、サイズが自動で変わらないので、スマホ閲覧時に右側に大きくはみ出してしまう。具体的には下記のような状態で、再生はできるものの、あまり見た目がよくない。

スクリーンショット 2015-05-24 23.12.09

スタイルシートにコードを追記

通常の場合は、スタイルシート(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。

  
埋め込み動画のレスポンシブ対応は、調べればさまざまなやり方が出てくるが、おそらくこの方法が一番シンプルなのでは。

Pocket

スポンサーリンク