Skip to main content
本文に 1263 文字追加
ソース リンク
水瀬敦美
  • 149
  • 1
  • 1
  • 14

    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>

    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>

ソース リンク
水瀬敦美
  • 149
  • 1
  • 1
  • 14

自己解決しました。
フルスクリーンにしたとき、画面サイズが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%);
  }
}

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