WEBサイトの背景に動画を設定する【HTML/CSS】

WEBサイトの背景に動画を設定したい。

ちょっとおしゃれにしてみたい。

WEBサイトへ動画を入れるメリットは、訪れた方の目を引きやすくなり、イメージを直感的に伝えられること。

このサイトのTOPページでも動画を差し込んでいます。

ちょっと中身を見て見ようかな？という気分になりませんか？（なっていてほしい（　＾ω＾）・・・）

と、いうことで、TOPに設定した動画を簡単にHTMLに書き直しましたので、備忘録です。

1. 背景の動画デモ
2. 準備物
3. コード
- 3.1. 考え方
- 3.2. point

背景の動画デモ

デモはこちらになります。

背景いっぱいの動画配置の記事はよく見ると思います。

ですので、この記事では

「背景画像の上に動画」、「動画の上に薄暗くする処理」を記録しています。

See the Pen background-video by dyna (@sakudyna) on CodePen.

準備物

準備物は以下です。

・配置する動画（4MB～5MBまでが理想）
・代替画像

動画を準備する

まずは動画を設定するため、.mp4(できれば .ogv、.WEBM も)の動画を準備します。

各形式を準備するのは、対応ブラウザが異なるためです。

2021年8月時点では「mp4形式」で大体は見れるみたい。

↓緑は対応している。

can i use mp4検索 — mp4対応状況　出典：https://caniuse.com/

サイズは4MBくらいまでが良いといわれています。

重すぎると表示速度落ちるからね・・・(;’∀’)

画像も準備する

動画が表示されるまでに表示する、代替画像を準備しておきます。

vieoタグについて

videoタグには以下のように設定値があります。

poster　映像のダウンロード中に表示される画像

playsinline　映像を「インライン」で再生する、すなわち要素の再生領域内で再生するかを指定

muted　音声をミュートさせる

autoplay　再生可能な状態になった時点で即座にコンテンツの再生が始まります

loop　映像の末尾に達すると、自動的に先頭に戻る

参考：https://developer.mozilla.org/

コード

コードです。


<div class ="visual">
  <video id="video" poster="画像URL" webkit-playsinline playsinline muted autoplay loop>
  <source src="動画URL" type="video/mp4">
  </video>
  <div class="coverTop">
  </div>
  <h2>TITLE</h2>
</div>
<div class ="mainContents">
  <p>text/text/text</p>
</div>

</video>

</div>

<h2>TITLE</h2>

</div>

</div>


.visual{
  width:100%;
  height:400px;
  position:relative;
  z-index: -1;
  background: url(背景画像URL) no-repeat  bottom;
  background-size:cover;
  text-align: center;
}
#video {
   width:100%;
   height:400px;
   overflow:hidden;
   display: flex;
   position: absolute;
   z-index:-1;
}
.coverTop {
  width: 100%;
  height:400px;
  position: absolute;
  background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.164) 50%, rgba(0, 0, 0, 0.384) 50%);
  background-size: 2px 2px;
  z-index:0;
}
h2{
  position: absolute;
  width:100%;
  top:100px;
  font-size:4em;
  color:#ffffff;
  text-shadow: 0px 0px 10px #3d3d3d;
}

.visual{

width:100%;

height:400px;

position:relative;

z-index: -1;

background: url(背景画像URL) no-repeat bottom;

background-size:cover;

text-align: center;

}

#video {

width:100%;

height:400px;

overflow:hidden;

display: flex;

position: absolute;

z-index:-1;

}

.coverTop {

width: 100%;

height:400px;

position: absolute;

background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.164) 50%, rgba(0, 0, 0, 0.384) 50%);

background-size: 2px 2px;

z-index:0;

}

h2{

position: absolute;

width:100%;

top:100px;

font-size:4em;

color:#ffffff;

text-shadow: 0px 0px 10px #3d3d3d;

}

考え方

1.　visual クラスに背景画像を設定

2.　 videoを配置

3.　coverTop クラスで背景・背景動画を暗くする

あとはCSSで整えるだけ！

point

大体は上記コードで何をしているか分かると思いますので、

ちょっと見慣れないポイントのみを書き残します。

HTMLのvideoタグ


<video id="video" poster="画像URL" webkit-playsinline playsinline muted autoplay loop>
  <source src="動画URL.mp4" type="video/mp4">
　<source src="動画URL.webm" type="video/webm">
</video>