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

CSS

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

2019年01月19日 8:00 

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

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

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

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

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



 

動画素材を見つける

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

Pexels Videos

 

coverr

 



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

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

 

1.VIDEOタグを記述

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

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

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

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

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

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

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

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

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

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

 

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

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

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

デモサイト

 

動画のサイズについて動画のファイルサイズが大きすぎると、再生されるまでに時間がかかるのでなるべく軽量(1MB前後)にするのが理想です。

 



まとめ

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

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

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

 

関連記事

この記事を書いた人

社員A

社員A

フロントエンドエンジニア・デザイナーの社員Aです。 多分一番更新頻度が多いかと思います。このブログのテーマも作成しました。ブログの執筆を通じて、やっと日本語Lv.20くらいになれた気がします。 家ではデグーとチンチラという小動物を飼っていて、かなり溺愛しています…!小動物が好きな皆さん、小動物トークしましょう!