93419


例えば以下のようにCSSを書くと概ね望み通りの表示が行えるのですが、フルスクリーン(F11)表示をさせた際に、ビデオの位置がtop50%を受けたように画面の中央より下に表示されてしまいます。（スニペットを最大化後にフルスクリーンで確認出来ます。）  
どのようにすれば問題を解決出来ますでしょうか。

[code]

    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%);
      }
    }
    
[/code]

[code]

    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%);
      }
    }
[/code]

[code]

    <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>
[/code]


CC BY-SA 4.0
2023-01-17T10:44:07.057
93409
2023-01-17T16:34:28.457
2023-01-17T15:51:36.123
31483
31483
question
css
HTMLでVideoを画面中央に全体表示させたい。


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

[code]

    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%;
    }
[/code]

[code]

    <video src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4" loop autoplay muted playsinline></video>
[/code]


CC BY-SA 4.0
2023-01-17T11:03:44.603
93410
2023-01-17T11:47:08.313
2023-01-17T11:47:08.313
3060
56628
93409
answer


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

[code]

    @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%);
      }
    }
    
[/code]

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

[code]

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

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

[code]

    @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%);
      }
    }
    
[/code]

回答を下さりありがとうございました。また、お騒がせしてしまいすみませんでした。

[code]

        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%);
          }
        }
[/code]

[code]

        <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>
[/code]


CC BY-SA 4.0
2023-01-17T16:29:03.350
93419
2023-01-17T16:34:28.457
2023-01-17T16:34:28.457
31483
31483
93409
answer