Tweet

Pocket

最近では背景に動画を用いたWebサイトが大分増えてきました。そこでホームページの背景に動画を再生させる方法をご紹介します。（レスポンシブ対応しています。）

実装方法

HTML5のvideoタグを使って表示させます。autoplayで自動再生させ、loopで繰り返し再生させます。
「videoImg」のdivタグでウィンドウサイズが600px以下で代替画像が表示されるようにしています。

HTML

<div id="movieBox">
　　<video src="movie/test.mp4" autoplay loop>
　　　　<source src="movie/movie.mp4" type="video/mp4" />
　　　　<img src="img/movie.jpg" alt="Placeholder">
　　</video>
　　
　　<div class="videoImg"></div>
　
　　<p>MP4</p>
</div>

CSS

#movieBox {
　　position:relative;
　　width:100%;
　　height:0;
　　padding-bottom:56.2765%;
　　overflow:hidden;
}

#movieBox video {
　　display:none;
　　position:absolute;
　　left:0;
　　top:0;
　　z-index:1;
　　width:100%;
}

#movieBox .videoImg {
　　display:block;
　　position:absolute;
　　top:0;
　　left:0;
　　z-index:1;
　　width:100%;
　　height:100%;
　　background:url(../img/movie.jpg) no-repeat 0 0;
　　background-size:100% auto;
}

#movieBox p {
　　position:relative;
　　font-size:50px;
　　margin:0;
　　padding:15% 0 0 0;
　　text-align:center;
　　z-index:2;
　　color:#fff;
}
@media only screen and (min-width: 600px) {
　　#movieBox video {
　　　　display:block;
　　}

　　#movieBox .videoImg {
　　　　display: none;
　　}
}

参考サイト

• 背景に動画を使ったWebサイトの作り方