Bootstrap4　テンプレート ver5

『Bootstrap4で無料テンプレートを作成する』シリーズ5回目です。

前回は「パララックス」というテクニックを入れてみました。今回はメインビジュアルに動画背景を表示してみます。

動画背景は少し前にウェブデザインのトレンドとしてよく見られた手法ですが、今でもよく目にします。

昨今の動画メディアの台頭を考えると、メインビジュアルに動画背景を使ったサイトは今後も増えていく気はします。

完成形は以下になります。

Bootstrap4 無料テンプレート ver5

やり方はそんなに難しくありません。

１．videoタグで動画を表示させる
２．動画にz-indexプロパティを指定して一番下に設置する
３．動画の上にオーバーレイをのせる（※可読性を高めるため）
４．オーバーレイの上にテキストをのせる

今回の作成にあたってポイントが３つあります。

以下、順に解説していきます。

 

videoタグ

videoタグは、動画を再生するときに使用します。感覚的にはimgタグで画像を扱うような感じです。

動画ファイルの指定には、videoタグのsrc属性か、<vide>～</video>の中でタグを使用します。

<!--パターンA-->
<video src="sample.mp4"></video>

<!--パターンB-->
<video>
<source src="sample.mp4">
</video>

 

僕の場合、パターンAのやり方だと上手く動画が再生されなかったので、パターンBでやりました。

実践ではvideoタグの属性も入れて動画再生の詳細を指定します。

<video autoplay loop muted poster="sample.png">
    <source src="sample.mp4" />
</video>

 

videoタグの属性

autoplay

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

loop

ループ再生を指定します。

muted

音を出さないように指定します。

poster

ユーザー環境で利用できる動画が無い場合に表示させる画像ファイルを指定することができます。

 

オーバーレイ

素の動画だと、動画の上に文字を置いても可読性が低くて読めません。

動画を背景として使う場合は、通常CSSでオーバーレイ用の要素を追加して、少し明度を落とします。

ここでは.wrapがそれにあたります。

HTML

<!-- グラデーションオーバレイ -->
<div class="jumbotron jumbotron-fluid mb-0 wrap">
    <!--背景用の動画ファイル-->
    <video id="bg-video" autoplay loop muted poster="{{asset('assets/images/tpl/main.jpg')}}">
        <source src="{{ asset('/assets/video/sample.mp4') }}" />
    </video>
</div>

 

CSS

せっかくなので、最近トレンドのCSSのグラデーションを使って、動画背景にグラデーションオーバーレイを設定します。

/* ----- グラデーションオーバーレイ ----- */
.wrap{
    width: 100%;
    height: 93vh;
    background: linear-gradient(-45deg, rgba(4, 114, 124, 0.4), rgba(17, 66, 99, 0.6));
}

 

解説

グラデーション（CSS）

CSSでグラデーションをかけるときには、backgroundプロパティに対して以下のように指定します。

background: linear-gradient(グラデーションの角度または方向 , 開始色 , 終了色);

 

rgba（CSS）

背景色を透過させる場合はCSS3のrgba()を使用します。

第三引数まではRGBの数値を指定し、最後はalpha値を入れて透明度を指定します。

rgba(0~255 , 0~255 , 0~255 , 0~1);

 

 

動画にpositonプロパティとz-indexプロパティを指定

動画にpositionプロパティとz-indexプロパティを指定し、動画を一番下に配置します。

videoタグに#bg-videoを追加し、このIDにpostionプロパティとz-indexプロパティを指定します。

 

HTML

<!-- グラデーションオーバレイ -->
<div class="jumbotron jumbotron-fluid mb-0 wrap">
    <!-- 背景用の動画ファイル -->
    <video id="bg-video" autoplay loop muted poster="{{asset('assets/images/tpl/main.jpg')}}">
        <source src="{{ asset('/assets/video/sample.mp4') }}" />
    </video>
    <!-- 背景の上に表示させたいコンテンツ -->
    <div class="container">
            <h1 class="display-4" data-anijs="if: scroll, on:window, do: fadeInUp animated, before: scrollReveal">Laravel</h1>
            <p class="lead" data-anijs="if: scroll, on:window, do: fadeInUp animated, before: scrollReveal">ウェブ職人のためのPHPフレームワーク</p>
            <a class="btn btn-secondary btn-lg" href="https://laraweb.net/" target="_blank" role="button" data-anijs="if: scroll, on:window, do: fadeInUp animated, before: scrollReveal">もっと学ぼう</a>
    </div>
</div><!-- /.jumbotron -->

 

CSS

#bg-video{
    position: absolute; /*positionプロパティを指定*/
    right: 0;
    top: 0;
    z-index: -100; /*z-indexプロパティを指定*/
    min-width: 100%;
}

 

解説

動画を一番下に設置するためにz-indexプロパティに対して "-100" を指定します。

z-indexプロパティはpositionプロパティにabsoluteやrelative、fixedが指定された要素（ポジショニングされた要素）でのみ有効です。

ですので、z-indexプロパティを指定する前にpositionプロパティを指定してやる必要があります。

グラデーションオーバレイを指定したwrapクラスやcontainerクラス(タイトルとボタン)にはz-indexは指定しません。

z-indexが指定されていない場合は、同じ階層の要素では基本的にソース上で後に書かれた要素が前面へ表示されるからです。

この場合、動画が一番下になり、その次にグラデーションオーバーレイ、一番上にはcontainerクラスで包括した要素が表示されるようになります。

 
以上です。

 

-Bootstrap4 テンプレート, 周辺知識