さすらいのWeb制作家、MAKOCHINがつづるブログサイト。
Web制作に関する知識を備忘録的に書いているだけのサイトです。
ほとんど自分で見るためだけに書いているような内容なので読みやすくはなっていませんが、Web制作のお役に立てれば幸いです。
ご興味のある方はどうぞ。

【HTML5】背景に動画を再生させる

Pocket
LINEで送る

最近では背景に動画を用いた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;
  }
}

参考サイト

カテゴリー:HP制作, HTML5

コメントを残す

コメント内容