【CSSだけで実装】背景いっぱいに動画を流すテクニック

おはようございます！社員Aです👩

今回はCSSだけで実装できる、背景いっぱいに動画を流すテクニックをご紹介したいと思います。

動画を背景全体に使うとそれだけでインパクトがありますよね。

jQueryのプラグインなども不要で、CSSだけで実装できるのもポイントですのでぜひご覧ください！

動画素材を見つける

あらかじめ動画が準備できている方は問題ないかと思いますが、動画のイメージなどが決まっていない方はフリーの動画サイトで見つけてみましょう！

Pexels Videos

videos.pexels.com

 

9159 Shares

85 Users

2645 Pockets

Free stock videos – Pexels Videos

https://videos.pexels.com

Pexels Videos makes it easy to find free stock footage for your website, promo video or anything else. All videos are free for personal and commercial use.

coverr

www.coverr.co

 

5819 Shares

118 Users

4667 Pockets

Beautiful, free stock video footage for your homepage

http://www.coverr.co

Download royalty free (for personal and commercial use), unique and beautiful video footage for your website or any project. No attribution required.

背景いっぱいに動画を実装

早速ですが、背景いっぱいに動画を実装する方法をまとめていきたいと思います。

1.VIDEOタグを記述

まずはVIDEOタグを使って動画をサイトに埋め込みます。

<video muted src="1.mp4" autoplay loop></video>

VIDEOタグはいくつかオプションがありますので、サイトに合わせてカスタマイズしてください。

poster属性で動画のヒントとなる画像を表示する

<video>タグのposter属性は、ユーザー環境で利用できる動画が無い場合に表示させる画像ファイルを指定することができます。

controls属性でインターフェースを表示する

<video>タグのcontrols属性を指定すると、再生・一時停止・再生位置の移動・ボリュームなど、 動画を利用しやすくするインターフェースを、ブラウザが自動で表示することになっています。

autoplay属性で動画を自動再生する

<video>タグのautoplay属性を指定すると、ウェブページを読み込んだ時点で、動画が自動再生されます。

preload属性で動画をあらかじめ読み込む

<video>タグのpreload属性を指定すると、ウェブページを読み込んだ時点で動画を裏側で読み込みます。

2.CSSで背景全面に動画を適用する

さきほどのVIDEOタグを、CSSで背景全面に設定していきます。

video {
    position: fixed;
    left: 0;
    top: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 1;
}

今回デモサイトを作ってみました。

デモサイト

まとめ

CSSで簡単に背景いっぱいの動画を流すことができました。

インパクトを出したいサイトや、イベントページなどにおすすめです。

ぜひ試してみてください！