【videoタグ】HTML5のvideoタグのレスポンシブ対応はどうするべきか。

Question

知りたいこと

HTML5のvideoタグのレスポンシブ対応のやり方について

PCサイズとSPサイズどちらも同じ１つの動画をファーストビュー等にに埋め込む場合
動画サイズをデバイスの大きさによって変えたいとします。

※PCは横長、SPやタブレットは縦長を想定しています。(iphone6s ~ 375 × 667pxを想定しています。)

PCはvideoタグに対して、width:100% , height:100%で指定しておけば、本来のアスペクト比を保つため綺麗なサイズで表示されるかと思いますが、

SPサイズになった時にwidth:100%,height:600px,objectfit-cover等で無理やり高さを決めてリサイズしてしまうと動画自体が無理やりリサイズされた結果、思い通り表示できないというのがあると思います。

こういったケースの時はどうするべきなのでしょうか。

①PCのみ動画を表示して、タブレットやスマホサイズではサムネイル画像等に変更する
②PCとSPそれぞれに使用する、動画を入れる※２つの動画を埋め込んでcssのdisplay:none / blockで切り替える→容量が増えそうで心配です。
③上記のように無理やりリサイズする。

これくらいしか選択肢が浮かばないのですが、一般的な扱いを知りたいです。

Answer 1

javascriptを使ってはいかがでしょうか？
ブラウザやデバイス幅で条件分岐し、src属性を変更するなどすると良いかと存じます。

参考

• https://www.site-convert.com/archives/1451

• https://teratail.com/questions/148919

Comments

[退会済みユーザー]

ありがとうございます！参考にさせていただきます。