コピペで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(http://kg-update.net/wp-content/uploads/2017/03/sougen.jpg) no-repeat fixed;
}
#VideoBg { display: none; }
}
スポンサードリンク
コメントを書き込む