CSS
【CSSだけで実装】背景いっぱいに動画を流すテクニック
2019年01月19日 8:00
おはようございます！社員Aです👩
今回はCSSだけで実装できる、背景いっぱいに動画を流すテクニックをご紹介したいと思います。
動画を背景全体に使うとそれだけでインパクトがありますよね。
jQueryのプラグインなども不要で、CSSだけで実装できるのもポイントですのでぜひご覧ください！
動画素材を見つける
あらかじめ動画が準備できている方は問題ないかと思いますが、動画のイメージなどが決まっていない方はフリーの動画サイトで見つけてみましょう！
Pexels Videos
coverr
背景いっぱいに動画を実装
早速ですが、背景いっぱいに動画を実装する方法をまとめていきたいと思います。
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で簡単に背景いっぱいの動画を流すことができました。
インパクトを出したいサイトや、イベントページなどにおすすめです。
ぜひ試してみてください！
関連記事
この記事を書いた人
社員A
入社8年目。フロントエンドエンジニア・デザイナーの社員Aです。 小動物が好きで、デグー・チンチラと暮らしています！トレンドの情報を発信できるようにがんばります☺
