端くれプログラマの備忘録 HTML5 [HTML5] 背景に動画を配置したページの作り方

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

2015年8月14日| @84kure| 2:20 AM

Categories:

HTML5

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

<video src="video.mp4" autoplay loop id="bgvid">
    <img src="video.jpg" alt="Placeholder">
</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;
}

参考サイト

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