CSSで動画を画面いっぱい(埋め込みサイズ変更の方法/レスポンシブ対応)

全画面で動画が流れるようvideoタグ埋め込み方法覚書です.

1 cssで動画を画面いっぱい(埋め込みサイズ変更の方法/レスポンシブ対応)

cssで動画を画面いっぱい(埋め込みサイズ変更の方法/レスポンシブ対応)

vueを使っていますが、cssの部分は他でも変わらないはずです。

vue.js(nuxt.js)の動画再生(videoの埋め込み)

<video autoplay muted loop playsinline>
 <source src="~/assets/mov/opening.mp4" />
</video>

動画ファイルのコンバートについてはこちらの記事をみてください。

Gif圧縮の容量・サイズ指定/ffmpeg・imagemagick

もともとH.264だったのですが、nuxtはH.264じゃないと再生されない情報がありました。

引数の説明です。iosやandroidではmutedしないとautoplayしない。というわけでautoplay mutedはセット。音声がいきなり再生されるとうるさいので、その配慮でしょう。

playsinlineはインライン再生するか否か。こちらのサイトの説明がわかりやすい。https://css-tricks.com/what-does-playsinline-mean-in-web-video/

全画面に背景動画をcssに!

背景動画の場合、absoluteで配置するとよさそうです。必要ならwrapしましょう。

video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  margin: 0 -15px;
}

marginはbootstrapvueのデフォルト値に対する対応です。動画は自分で撮影してもいいかもですが、素材サイトなどを利用するのも手です。

adobe stockの料金!通常・拡張・強化ライセンスの違い!【商用利用可】

動画素材が小さい場合

元の動画素材が小さい場合、PCで確認すると全画面埋つくされていないことがあります。その場合、次の設定が必要です。ただし、動画は拡大されて荒くなる気がします。

video {
  object-fit: cover;
}

高さのサイズ変更

高さは長すぎると動画で埋め尽くされてしまって下にコンテンツがあるかわからなくなる場合があります。そのためmax-height:を追加しました。

.video-wrap {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  max-height: 700px;
  object-fit: cover;
}

注意点としてはvideoの幅はwidth: 100vw;だと全部表示されません。

cssの動画の上に文字

動画の上に文字をのっけます。

.video-telop {
  position: absolute;
  top: calc(50% - 20px);
  left: 50%;
  color: white;
  transform: translateX(-50%);
}

参考になれば幸いです。