【JavaScript】MV・FV動画を縦横ブラウザ幅いっぱいに表示する

2025年03月17日

WEBサイト制作

#HTML
#css
#JavaScript
#tips

こんにちは！
上毛印刷WEB制作担当のソーヤです。

MV（メインビジュアル）もしくは、FV（ファーストビュー）を動画にしたいという要望は非常に多いです。

ただワイド画面（アスペクト比16:9）の動画だと、ブラウザの幅によって余白が表示されてしまいます。
そんなときにこのtipsが役立ちます！

実装例が少し特殊なので、デモページを作成しました。
アクセスしてみてください。
デモページはこちら（別タブで開きます）

HTML例

<div class="p-mv">
  <div class="p-player-wrap">
    <div class="p-player-inner">
      <video id="js-player" playsinline muted autoplay loop>
        <source src="./DSC_8876_1.mp4">
      </video>
    </div>
  </div>
</div>

CSS例

.p-mv {
  position: relative;
  width: 100%;
  height: calc(100vh - 0px);
  overflow: hidden;
}
.p-player-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.p-player-inner {
  position: relative;
}
#js-player {
  position: relative;
  width: 100vw;
  height: 100vh;
}

JavaScript例

function resizeMV() {
    var baseWidth = 1200;
    var baseHeight = (baseWidth / 16) * 9;
    var windowWidth = window.innerWidth;
    var windowHeight = window.innerHeight;
    var adjustedWidth = windowWidth;
    var adjustedHeight = Math.round(baseHeight * (adjustedWidth / baseWidth));
    if (adjustedHeight < windowHeight) {
        adjustedHeight = windowHeight;
        adjustedWidth = Math.round(baseWidth * (adjustedHeight / baseHeight));
    }
    if (window.matchMedia('(min-width: 769px)').matches) {
        var playerElement = document.getElementById('js-player');
        if (playerElement) {
            playerElement.style.width = adjustedWidth + 'px';
            playerElement.style.height = adjustedHeight + 'px';
            playerElement.style.marginTop = (windowHeight - adjustedHeight) / 2 + 'px';
            playerElement.style.marginLeft = (windowWidth - adjustedWidth) / 2 + 'px';
        }
    }
}
document.addEventListener('DOMContentLoaded', resizeMV);
window.addEventListener('resize', resizeMV);