電話番号
電話番号

簡単にサイト背景に動画を設置する方法

ホームページ制作・SEO対策 | 栃木県宇都宮 ジップサービス > ブログ > 簡単にサイト背景に動画を設置する方法

こんにちは。ジップサービスでデザイナーをしているものです。

今回は背景に動画を設置する比較的簡単な方法をご紹介しようと思います。

背景動画がポピュラーになったのは既に数年前の話ではありますが、まだまだ需要はありそうです。

背景動画の参考サイト

ということで、説明に入る前にまずは背景動画が実際に使われているサイトを紹介したいと思います。

Re:creation

kp001 https://re-creation.co.jp/

動画そのものがとても素敵です。都会的なイメージとカラーバランスで未来感が漂います。

CROSSBACKYARD.COM

kp002 https://crossbackyard.com/

事業内容が瞬時に伝わってきます。また人にフォーカスを当てていて親近感を覚えます。

AbemaTV

kp003 https://recruit.abematv.co.jp/

映像配信サービスならではのハイクオリティーです。チャンネルの豊富さと運営側の情熱が瞬時に伝わります。

※上記3件のサイトは2017年5月時点のものであり、現在は異なる可能性がございますのでご了承ください

bideo.jsを使用

kp004

参考になる背景動画サイトを紹介させてもらったところで制作方法の説明に入ります。
今回はbideo.jsというスクリプトを使って実装するパターンを紹介いたします。

bideo.jsはレスポンシブ対応の単体で動作する軽量スクリプトです。

bideo.jsの使い方

1.bideo.jsをダウンロード

kp005

https://rishabhp.github.io/bideo.js/にアクセスしていただき「View on Github」をクリックします。

kp006

Githubに推移しますので、上記の手順でダウンロードします。

2.スクリプトの読み込み

ダウンロードしたzipファイルを解凍し、中にある「bideo.js」と「main.js」を読みます。

ソースを表示
印刷SyntaxHighlighterについて
1  <script src="bideo.js"></script>
2  <script src="main.js"></script>
3</body>

3.動画ファイルの設定

「main.js」の「src: ‘video/top.mp4’,」の行を自身が設定した動画ファイルに変更します。

ソースを表示
印刷SyntaxHighlighterについて
1(function () {
2 
3  var bv = new Bideo();
4  bv.init({
5    // Video element
6    videoEl: document.querySelector('#background_video'),
7 
8    // Container element
9    container: document.querySelector('body'),
10 
11    // Resize
12    resize: true,
13 
14    // autoplay: false,
15 
16    isMobile: window.matchMedia('(max-width: 768px)').matches,
17 
18    playButton: document.querySelector('#play'),
19    pauseButton: document.querySelector('#pause'),
20 
21    // Array of objects containing the src and type
22    // of different video formats to add
23    src: [
24      {
25        src: 'video/top.mp4',
26        type: 'video/mp4'
27      },
28      {
29        src: 'night.webm',
30        type: 'video/webm;codecs="vp8, vorbis"'
31      }
32    ],
33 
34    // What to do once video loads (initial frame)
35    onLoad: function () {
36      document.querySelector('#video_cover').style.display = 'none';
37    }
38  });
39}());

※今回は「top.mp4」という動画を使用しました

4.HTMLの記載

該当箇所に記述します。
ソースを表示
印刷SyntaxHighlighterについて
1<video id="background_video" loop muted autoplay></video>

今回デモとして下記のhtmlを作成しました。

ソースを表示
印刷SyntaxHighlighterについて
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>GIP blog DEMO</title>
6    <meta description="GIP blog DEMO">
7  <link rel="stylesheet" type="text/css" href="css/style.css">
8</head>
9<body>
10    <div id="container">
11        <video id="background_video" loop muted autoplay></video>
12        <div id="video_cover"></div>
13        <div id="overlay"></div>
14 
15        <section id="main_content">
16            <div id="head">
17                <h1>GIP blog DEMO</h1>
18                <p class="sub_head">GIP blog DEMO GIP blog DEMO GIP blog DEMO</p>
19            </div>
20        </section>
21    </div>
22  <script src="js/bideo.js"></script>
23  <script src="js/main.js"></script>
24</body>
25</html>

※各々の環境に併せて変更してください

5.CSSの記述

動画設置に必要なスタイルを記述してます。

ソースを表示
印刷SyntaxHighlighterについて
1* {
2    margin: 0;
3    padding: 0;
4}
5 
6html,
7body {
8    width: 100%;
9    height: 100%;
10    overflow: hidden;
11    text-align: center;
12}
13 
14#container {
15    overflow: hidden;
16    position: absolute;
17    top: 0;
18    left: 0;
19    right: 0;
20    bottom: 0;
21    height: 100%;
22}
23 
24#background_video {
25    position: absolute;
26    top: 50%;
27    left: 50%;
28    transform: translate(-50%, -50%);
29    object-fit: cover;
30    height: 100%;
31    width: 100%;
32}
33 
34#video_cover {
35    position: absolute;
36    width: 100%;
37    height: 100%;
38    background: url('video_cover.jpg') no-repeat;
39    background-size: cover;
40    background-position: center;
41}
42 
43#overlay {
44    position: absolute;
45    top: 0;
46    right: 0;
47    left: 0;
48    bottom: 0;
49    background: rgba(0, 0, 0, 0.5);
50}
51 
52#content {
53    z-index: 2;
54    position: relative;
55    display: inline-block;
56    top: 50%;
57    transform: translateY(-50%);
58}
59 
60#content h1 {
61    text-transform: uppercase;
62    font-weight: 600;
63    color: #fff;
64    font-size: 35px;
65}
66 
67#content .sub_head {
68    color: rgba(255,255,255,0.5);
69    font-size: 18px;
70    margin-top: 18px;
71}

※各々の環境に併せて変更してください

6.完成

デモサイト

まとめ

今回は簡単に背景動画を実装できる方法を紹介させていただきました。

動画を使ったアプローチは、まだまだ需要がありそうです。

それではまた次回。