videoタグのつまずき2/全画面表示 /たてよこいっぱい
Jul 29, 2020
動画の全画面表示編
2021/3/21 DEMOページを追記しました。
「動画をフルスクリーンで表示したいのに、思ったようにできない…」が発生。
試行錯誤の結果をメモしておきます。HTMLとCSSだけです。jQueryなどは、使いません。
とくに、画面サイズが変わっても常に中央が表示されるようにしたい(センター基準)にするのに、悩みました。
これは、ビューポートのアスペクト比を調べるaspect-ratioを使う事で解決しました。
HTML
<div class="video-container"> <div class="video-wrap"> <video src=".../●●●.mp4" type="video/mp4" playsinline loop autoplay muted> </video> </div> </div>
CSS
.video-container { margin: 0 auto; width: 100%; left: 0; right: 0; top: 0; bottom: 0; } .video-wrap { position: relative; overflow: hidden; width: 100%; height: 100vh; background: url(img/video.jpg) no-repeat center center/cover; } video { min-width: 100%; min-height: 100vh; position: absolute; } /*画面サイズが変わっても常に動画の中央が表示されるようにする*/ /*動画よりも画面が横に長くなるとき用*/ @media (aspect-ratio: 16/9), (min-aspect-ratio: 16/9) { video { width: 100%; top: 50%; transform: translateY(-50%); } } /*動画よりも画面が縦に長くなるとき用*/ @media (max-aspect-ratio: 16/9) { video { height: 100%; left: 50%; transform: translateX(-50%); } }
これで、パソコンでも、スマホでも、レスポンシブしたって、常にセンター合わせで全画面表示されます。
DEMOページです。このDEMOは正方形の動画を使っているので、メディアクエリの「aspect-ratio」「min-aspect-ratio」「max-aspect-ratio」の「16/9」になっている箇所を「1/1」にして表示しています。