1

例えば以下のように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>

2 件の回答 2

1

このように、video要素に対して、position: absolutetop: 50%left: 50%transform: translate(-50%, -50%)を指定することで、画面中央に表示させることができます。
また、html、body要素に対して、overflow: hiddencursor: defaultheight: 100%を指定することで、スクロールバーを消し、カーソルを消し、全体を表示することができます。
また、フルスクリーン表示にも対応できるようになります。

video {
  min-width: 100%;
  min-height: 100vh;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
html, body {
  overflow: hidden;
  cursor: default;
  height: 100%;
}
<video src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4" loop autoplay muted playsinline></video>

3
  • 回答ありがとうございます。その方法で確認を行いましたが、ビデオサイズが画面サイズに応じて変化しないため、サンプル動画で画面サイズ1080pですと気になりませんが、動画サイズが仮に2Kだったとすると表示されない部分が大きいです。 Commented 2023年1月17日 12:05
  • 以下の2つ方法を確認してみてください 方法① video { width: 80%; height: 80%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } 方法② video { max-width: 100%; max-height: 100vh; width: 80%; height: 80%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
    – ガロナ
    Commented 2023年1月17日 12:47
  • 回答ありがとうございます。両方法を確認してみましたが、動画サイズと画面サイズのアスペクト比が一致していない場合余白が表示されてしまいます。また、当方の質問に添付しているスニペットの内容を僅かに修正したため、スニペットを実行後、最大化し、ブラウザの画面サイズ(ウィンドウサイズ)を変えた際の挙動やフルスクリーンにして頂いたときの挙動などを確認して頂けますと幸いです。 Commented 2023年1月17日 15:55
0

自己解決しました。
フルスクリーンにしたとき、画面サイズが16/9になることで、(以下の)両方の処理が適応されていました。

@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%);
  }
}

ですので、上記コードの下に

@media (aspect-ratio: 16/9) {
  video {
    top: 0%;
  }
}

と追記するか頭に!importantを付けて以下の様に書くことで該当の問題は発生しなくなりました。

@media (aspect-ratio: 16/9) {
  video {
    top: 0% !important;
  }
}
@media (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) {
      video {
        top: 0% !important;
      }
    }
    @media (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>

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。