【jQueryなし】MP4動画を背景動画で特定div内だけに表示させる方法

 

全面背景動画のjQueryプラグインはよくありますが、今回は特定のdiv内だけに動画を表示させる方法をご紹介します。

完成形

HTML

<div class="main-visual">
  <img src="★URL★" alt="この画像は動画の上に来ます"/>
  <video autoplay loop poster="★動画の一番初めをスクリーンショット★" id="bgvid">
	<source src="★.mp4で終わるファイルを指定★" type="video/mp4">
  </video>
</div>

動画の上にキャッチコピーを乗せると良い感じになります。
スマートフォンでは背景動画は自動再生されないので、htmlを変える必要があります。

CSS

.main-visual {
    height: 600px;
    background-size: cover;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.main-visual img {
    z-index: 2;
    position: absolute;
    top: 100px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

.main-visual video {
    margin: 0 auto;
    z-index: 1;
    width: 100%;
}

背景動画をwidth:100%で横幅いっぱいにして、外側div要素の.main-visualでoverflow: hidden;して600pxからはみ出ているところを非表示にしているだけです。

今後、トップページ背景動画は流行る

日本企業のウェブサイトでは全面背景動画よりも、特定div内だけに背景動画を表示するほうが好まれています。

この背景動画の良いところは、中で働いている人を見てもらうことで親近感が一気にアップすることです。価格勝負にしたくない企業はブランディングのためにこの方法を採用してみると面白いですよ。

ポイントは、中の人の表情を撮影することです。

是非やってみてください。