画面全体に背景動画を流す

動画
-画面全体に背景動画を流す-

デモページを見る

See the Pen 6-3-1 画面全体に背景動画を流す by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen.

「Result」内の表示を確かめてね!

動きを実現する仕組み

HTML のvideo タグを使い、CSS で画面いっぱいに拡大して背景動画を流す。
video タグに対応していないブラウザには代替画像を用意して表示する。

HTMLの書き方

  1. head終了タグ直前に自作のCSSを読み込みます。
    <link rel="stylesheet" type="text/css" href="css/6-3-1.css">
    </head>
  2. video ファイルと代替え画像を用意します。video ファイルは各ブラウザに対応するため .mp4、.ogv、.webmの3 種類を用意します。
    ※動画は、ユーザーのページの読み込み時間や再生時の挙動を削減するため4MB 以下を目安に制作しましょう。
    ※無料の高画質video 素材は Pixabay (https://pixabay.com/)などのサービスを活用しましょう。
  3. body内の背景動画を表示させたい場所にHTMLを記載します。
    <header id="header">
    <h1>Title</h1>
    <div id="video-area">
    <video id="video" poster="img/movie.jpg" webkit-playsinline playsinline muted autoplay loop>
    <!--
    poster:動画ファイルが利用できない環境で代替表示される画像
    webkit-playsinline:iOS 9までのSafari用インライン再生指定
    playsinline:iOS 10以降のSafari用インライン再生指定
    muted:音声をミュートさせる
    autoplay:動画を自動再生させる
    loop:動画をループさせる
    controls:コントロールバーを表示する
    -->
    <source src="video/movie.mp4" type="video/mp4">
    <source src="video/movie.ogv" type="video/ogv">
    <source src="video/movie.webm" type="video/webm">
    <p>動画を再生できる環境ではありません。</p>
    </video>
    <!--/video-area--></div>
    </header>

自作のCSS内の書き方


/*========= 背景動画設定のCSS ===============*/

/*header設定*/
#header{
    position: relative;/*h1の中央寄せ配置の起点とするためのrelative*/
    height: 100vh;/*高さを全画面にあわせる*/
} 

#video-area{
    position: fixed;
    z-index: -1;/*最背面に設定*/
    top: 0;
    right:0;
    left:0;
    bottom:0;
    overflow: hidden;
}

#video {
    /*天地中央配置*/
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /*縦横幅指定*/
    width: 177.77777778vh; /* 16:9 の幅→16 ÷ 9= 177.77% */
    height: 56.25vw; /* 16:9の幅 → 9 ÷ 16 = 56.25% */
    min-height: 100%;
    min-width: 100%;
}

/*見出し設定*/
h1{
    /*要素の配置*/
    position:absolute;
    /*要素を天地中央寄せ*/
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    /*見た目の調整*/
    color:#fff;
    text-shadow: 0 0 15px #666;
}

この技術を使ったサンプルサイト

バリエーション
を見る

「機能」に関わる
動き一覧

書籍情報

紙面だからこそできるまとめ方でコードを説明し、
全体を俯瞰して調べることが出来る構成になっています。

もちろん、パーツのサンプルコードもzipでまとめてダウンロードできます。
購入をしてくださった方には特典がありますので是非チェックしてみてください!

書籍紙面サンプル

出版社:ソシム株式会社
2021/2/27 発売

書籍紙面サンプル

出版社:ソシム株式会社
2021/7/31 発売

Page
Top