【HTML5】背景に動画を再生させる
最近では背景に動画を用いた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; } }
コメントを残す