Youtube動画の埋め込みをレスポンシブ対応にする方法 – 映像制作・動画制作京都　ウィンドミル

ウェブサイトをスマホやタブレットに対応させるため、youtube動画をデバイスの横幅に合わせて表示させる方法をご紹介します。

スマホやタブレットの横幅に合わせてYoutubeの動画を表示させるためには、iframe要素をCSSで調整します。画像はHTMLのimg要素で調整します。

スマホやタブレット対応は当たり前の時代に

最近はウェブにアクセスするためのデバイスとして、iPhoneやandroidなどのスマホ、iPadなどのタブレットがどんどん普及しています。

こうなると、PCの表示だけを考えてwebサイトを作るわけにはいきません。レスポンシブWebデザインを用いて、スマホやタブレットに対応させることは当たり前の時代になりつつあります。

また、Googleも「モバイルフレンドリーなサイトを検索結果で優先する」と公表しているので、スマホ表示に対応していないサイトはSEOや検索順位の面でも不利になります。

そのため、ウェブサイトはレスポンシブデザインで作る必要が出てきましたが、最近のWordPressテーマは、最初からレスポンシブ対応のものが増えています。

スマホやタブレットに対応したレスポンシブデザインのサイトは、デバイスの横幅に合わせて文字や画像を表示してくれるので、更新の時にいちいち適切な画像のサイズや文字の位置を考える必要はありません。

レスポンシブデザインでウェブサイトを作るなら、最初からレスポンシブ対応のテーマを使うのが一番簡単な方法です。しかし、中途半端なレスポンシブテーマを選ぶと、スマホで見た画像がはみ出したり、途中で切れたりする場合があります。

中途半端なレスポンシブwebデザイン

中途半端なレスポンシブwebデザインで画像を見ると、こんな感じになります。文字幅以上に画像が広がってますね。これはデバイスと画像の横幅が一致しない場合に起こる現象です。

今度はGoogleマップを表示させてみましょう。こちらもデバイスの横幅より＜iframe＞で指定したGoogleマップの横幅の方が大きいので、枠からはみ出したような表示になります。youtubeの場合も＜iframe＞を使うので、同じような表示になります。

続いてPCで表示させた場合です。ブラウザの横幅を縮めてスマホと同じようなサイズにすると、画像が切れてしまいました。youtube動画やGoogleマップも同様です。

横幅が小さくなっても画像の大きさは変わらないので、このような表示になります。

ちなみに、PCのブラウザでそのサイトがレスポンシブデザインかどうかを調べる方法があります。

やり方は簡単、該当のウェブサイトを表示させてから、ブラウザの端をつまんで縮めたり広げたりしてください。横幅に応じて文字の配置や画像の大きさが変わるなら、そのウェブサイトはレスポンシブデザインで作られています。

画像をレスポンシブ対応に

では、スマホやタブレットでも画像がはみ出したり切れたりしないように、デバイスの横幅に合わせて画像を伸縮させてみます。CSSファイル内に以下を記載してください。

img{
max-width: 100%;
height: auto;
}

たったこれだけでデバイスの横幅に合った画像が表示されるようになります。先ほどの方法でブラウザの横幅を変えながら、画像が伸縮するかどうか確認してみてください。

youtube動画の＜iframe＞をレスポンシブ対応

続いて、youtube動画やGoogleマップを表示させるための＜iframe＞をレスポンシブに対応させます。

youtubeの動画やGoogleマップ埋め込み用の＜iframe＞を＜div class=”iframe-css”＞で囲んで、横幅に合わせて伸縮するようにCSSを設定します。positionプロパティは＜div class=”iframe-css”＞を relative で相対指定とし、＜iframe＞には absolute で絶対指定としています。

CSS4行目の padding-top:56.25%; は、youtube動画の縦横比率に応じて変更します。16:9の動画を埋め込んだ場合は56.25%ですが、4:3だと75%になります。数値が違っても表示はされますが、周囲に余白が生じます。

Googleマップは適当な数字を入れても大丈夫ですが、どうしても比率を合わせて表示させたい場合は、「縦幅÷横幅×100」で計算した数字を入れて下さい。youtubeも同様です。例えば、youtubeで1024×768の動画を埋め込む場合の計算式は、「768÷1024×100＝75」なので、padding-top:75%となります。

＜iframe＞レスポンシブ対応 HTML


<iframe width="560" height="315" src="https://www.youtube.com/embed/DqOWgIxALbA" frameborder="0" allowfullscreen></iframe>
</div>

＜iframe＞レスポンシブ対応 CSS

.iframe-css {
  position: relative;
  width: 100%;
  padding-top:56.25%;
}

.iframe-css iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

これで画像のimg要素と、youtube・Googleマップなどを表示させるiframe要素が、レスポンシブWebデザインに対応しました。このコードはWordPressだけでなく、MovableTypeやHTMLで作成したウェブサイトにも使えますよ。

HTMLとCSSに少し追記するだけなので、すぐに実行できます。スマホやタブレットでYoutube動画や画像が切れたり、横幅からはみ出してしまうという場合に、一度試してみてください。