Youtubeなど埋め込み動画をスマホ表示用に可変サイズにする

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る
Youtubeなど埋め込み動画サイズをスマホの幅ピッタリにする
 Youtubeなどの動画を埋め込むとき、動画のページで表示サイズを決めてからiframeタグを取得します。そのままPC用のサイトに貼り付ければとても見やすいです。でもレスポンシブでスマホに表示すると、サイズが固定されたままなので、動画の端がスマホの画面からはみ出ることになります。そこでCSSを使って、表示する端末の画面幅に合わせてサイズが可変する埋め込み動画に変更します。


コード

埋め込みダグ

YouTubeなど埋め込み動画サイズをスマホの幅ピッタリにする

 YouTubeなら動画の埋め込みタグなら、このように取得できます。このとき動画のサイズを決めますので、このままウェブサイトやブログに貼るとサイズが固定されてしまいます。これをcssで常に貼った場所いっぱいに広がるようにすれば、タブレットでもスマホでも見やすくなります。

 ただし、画質の粗い動画だと広がることによって、逆に見づらくなることがありますので、注意が必要です。



html

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

css

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

.movie iframe {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
 iframeタグに可変する枠div.movieをつけて、その中でiframeを100%表示させます。

 padding-top: 56.25%;としているのは、HD動画のアスペクト比が16:9なので、16:9 = 100%:56.25% 100%の幅に対して100%x9/16 = 56.25% となります。

 異なるアスペクト比の場合、56.25%を計算し直せば対応可能です。

 ちなみにheight: 56.25%;は効きません。要素の大きさを比率でコントロールしたいときはpaddingを使います。



cssの効果

 別記事でいつもお世話になっている埋め込み動画で試してみます。

誰でもできる!ニンテンドー3DSの充電コネクタの交換修理! | ウェブソク



div.movieなし

 PCならブラウザの大きさを変えてみて下さい。サイズが固定されているため、小さくするとはみ出ると思います。





div.movieあり

 ブラウザの大きさを変えても、常に幅いっぱいに表示されます。



まとめ

 この要素の比率を固定する方法は、埋め込み動画だけではなく、レスポンシブのウェブサイトを作るときにいろいろ使えます。cssで要素の比率、主に高さをコントロールできるのは助かりますね!



ブログに埋め込んだYouTubeは少しの追記で高画質になる! | ウェブソク

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

SNSでもご購読できます。

コメントを残す

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください