【CSSのみ】jQueryを使わずフルスクリーン背景動画の設定方法

最近、動画が使ったサイトをよく目にします。ファーストビューで動画がド―――ンと目に入るとインパクトがあり、とても印象的ですよね。今回は、フルスクリーンの背景に動画を埋め込む設定方法をjQueryを使わず、CSSのみでサンプルコード付きでご紹介します。

1. HTML
2. CSS
3. 最後に

HTML

<!--コンテンツ 任意で設定して下さい-->
<div class="contents">
<h1>CREAM</h1>
<p class="sub_title">This page is a demo page.<br>Page is embedded with the video in the background only in CSS.</p>
<a href="" class="link">Back to page</a>
</div>

<!--背景動画タグ-->
<video autoplay loop poster="img.jpg">
<source src="動画URL" type="video/mp4">
</video>

CSS内のbodyタグのbackgroundの画像は動画が再生されない、スマホやタブレット、IE8などの非対応ブラウザ用に設定します。もし必要ないと思う方は設定しなくて大丈夫です。

CSS

body {
    margin: 0;
    padding: 0;
    background: url(画像URL) center center fixed no-repeat;
    text-align: center;
    font-family: 'proxima-nova', Helvetica;
}

/*背景動画*/
video {
    position: fixed;
    top: 0; 
    left: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -1;
}

/*コンテンツ 任意で設定して下さい*/
.contents {
    width: 60%;
    margin: 2em auto;
    padding: 2em 2em 4em 2em;
    background-color: rgba(0,0,0,.5);
}

.contents h1 {
    color: #ffffff;
    font-weight: bold;
    font-size: 40px;
}

.contents .sub_title {
    color: #ffffff;
    font-size: 16px;
    margin: 0px 0 60px 0;
}

.link {
    color: #333333;
    background-color: #ffffff;
    padding: 10px;
    text-decoration: none;
    font-weight: bold;
}

デモページ

最後に

動画を埋め込むことでメリット・デメリットはありますが、PCに関してはやはりインパクト大だと思うので、ぜひ試してみて下さい。しかし、スマホやタブレットだと自動再生されないので、設定しても動画が流れないのがやはりデメリットですかね。