例えば以下のようにCSSを書くと概ね望み通りの表示が行えるのですが、フルスクリーン(F11)表示をさせた際に、ビデオの位置がtop50%を受けたように画面の中央より下に表示されてしまいます。(スニペットを最大化後にフルスクリーンで確認出来ます。)
どのようにすれば問題を解決出来ますでしょうか。
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%);
}
}
html, body {
overflow: hidden;
cursor: default;
height: 100%;
}
.hoge {
position: fixed;
top: 0;
right:0;
left:0;
bottom:0;
overflow: hidden;
}
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%);
}
}
<html><head><body>
<div class="hoge"><video src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4" loop autoplay muted playsinline></video></div>
</body></head></html>