1. TOP
  2. CSS
  3. コピペでCSS 背景を動画にする HTML5のVIDEO要素

コピペでCSS 背景を動画にする HTML5のVIDEO要素

おはこんばんちわハクロンです。

CSSで背景を動画にする方法です。

結果

今回は既にこの投稿ページが結果です。
ブラウザが未対応でない限り既にこのページの背景が草原の動画になっていると思います。
※スマホには対応していませんので、PCでご確認ください。
スポンサードリンク


HTML

HTML5のvideo要素に対応していないブラウザでは動画が出ません。とりあえずその場合、静止画が出るようにしています。 すごく簡単です。
<video autoplay loop poster="動画が出ないときの静止画" id="VideoBg" muted>
  <source src="動画のURL" type="video/webm">
</video>


CSS

body {
  margin: 0;
  padding: 0;
/* 代替の背景画像  */
  background: url(動画が出ないときの静止画) #666;
  background-attachment: fixed;
  background-size: cover;
}

#VideoBg {
  position: fixed;
  min-width: 100%; 
  min-height: 100%;
  right: 0; 
  bottom: 0;
  width: auto; 
  height: auto;
  z-index: -1000;
}

/* PC以外のデバイスは殆ど動画でないので背景画像にしてしまう。 */
@media screen and (max-device-width: 800px) {
body {
background: url(https://kg-update.net/wp-content/uploads/2017/03/sougen.jpg) no-repeat fixed;
}
#VideoBg { display: none; }
}



「パソコン」を
yahooで探す     
    
「パソコンバッグ」を

スポンサードリンク

コメントを書き込む

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。