[HTML5] 背景に動画を配置したページの作り方

HTML5対応ブラウザであればCSSだけで実装できる。古いブラウザやモバイルは要注意。

<video src="video.mp4" autoplay loop id="bgvid">
    <img src="video.jpg" alt="Placeholder">
</video>

</video>

video#bgvid {
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background: url(video.jpg) no-repeat;
    background-size: cover;
}

video#bgvid {

position: fixed;

top: 50%;

left: 50%;

min-width: 100%;

min-height: 100%;

width: auto;

height: auto;

z-index: -100;

webkit-transform: translateX(-50%) translateY(-50%);

transform: translateX(-50%) translateY(-50%);

background: url(video.jpg) no-repeat;

background-size: cover;

}

参考サイト

the new code – Create Fullscreen HTML5 Page Background Video
http://thenewcode.com/777/Create-Fullscreen-HTML5-Page-Background-Video

参考サイト

関連記事