QR Code Business Card

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

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


コード


埋め込みダグ


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

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

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



html




css



 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は少しの追記で高画質になる! | ウェブソク

SNSでもご購読できます。

コメントを残す

*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)