HTML5:「video要素」を使ってカッコいいTOPページを作成

CODE
2019.11.17

どうもTSUNEです。サイト模写第二弾をしてみました。今回は某ライドシェア大手のTOPページになります。背景に動画が流れており、非常にオシャレなサイトになっています。

HTML5から新しく取り入れられたvideo要素を使えば簡単にできます。

HTML5以前はFlashを使うために、プラグインを入れてとかしないと出来ず、非常に面倒だったようです。今では動画も画像と同じような扱いで取り入れることができるようになりました。

動画を背景全体に表示

以下は、実際に記述したものです。

HTML

　　　　 <header>
            <div class="header-logo">
                <h1>Gyft</h1>
            </div>
            <nav class="header-list">
                <ul>
                    <li>DRIVER</li>
                    <li>RIDER</li>
                    <li>BUSINESS</li>
                    <li>LOG IN</li>
                </ul>
            </nav>
            <video class="top-video" src="動画.mp4" loop autoplay method>
                    <p>動画を再生するにはvideoタグをサポートしたブラウザが必要です。</p>
            </video>
        </header>

videoタグで動画を設定します。自動再生とループは属性値で設定します。今回のケースでは、自動で再生され、動画が終わると始めに戻る「loop」を指定しています。他の属性もございますので、下記を参考にしてみてください。

<video>－HTML5タグリファレンス
HTML5のタグ解説
www.htmq.com

リファレンスには記述がないのですが、「playsinline」を設定することでスマートフォンでのインライン再生が可能となります。

インライン再生が設定されていないとスマートフォンで動画再生がフルスクリーンになってしまうということが発生する恐れがあるのでこちらも設定しておくと良いかと思います。

CSS

header{
    height:50px;
    color: white;
  }

  .header-logo{
    float:left;
    padding: 0px 60px;
  }

  .header-list{
    margin-right: 60px; 
  }

  ul{
    float:right;
    display: table;
  }
 
  li{
    float: left;
    padding:20px 30px;
    font-weight: bold;
    list-style:none;
    display: flex;
  }

  li:hover{
    color: blue;
    cursor: pointer;
  }

  h1:hover{
    color: blue;
    cursor: pointer;
  }

  .top-video{
    position:absolute;
    right:0;
    top:0;
    height: auto;
    max-width: 100%;
    z-index: -1;
  }

positionを絶対位置で指定します。

    position:absolute;
    right:0;
    top:0;

ウィンドウサイズに合わせるために

 height: auto;
 max-width: 100%;

heightとwidthを指定します。

 z-index: -1;

最後に背景にするため、z-inndexを「-1」とします。これで完了です。

動画を背景全体に表示のまとめ

動画を使ったTOPページのサイトはインパクトがあってカッコイイですね！

以上です。

コメント