フロントのエンド

Web開発をがんばりたいブログ

CSS

Webページの背景を動画にするときのお作法

by:
16/09/05

videoタグで動画を呼んで背景的に使う場合は、モバイルとPCで処理をわけておかないとダメっぽい。

というのも

videoタグにて動画を呼んでくると

<!-- html -->
<video src="videofile.ogg" poster="posterimage.jpg" autoplay="autoplay" width="300" height="150">
    <source src="path/to/hoge.mp4" type="video/mp4" />
    <source src="path/to/hoge.webm" type="video/webm" />
</video>

コード自体はこういう感じになるわけですが、

これをこのままモバイルで見ると

IMG_1515

たいていは自動再生に対応してないので、再生ボタンがガッツリとでちゃいます。

考え方

なので、

<!-- html -->
<div class="video-wrap">
    <video src="videofile.ogg" autoplay poster="posterimage.jpg">
      <source src="path/to/hoge.mp4" type="video/mp4">
      <source src="path/to/hoge.webm" type="video/webm">
    </video>
</div>

動画をwrapして

/*scss*/
.video-wrap {
    video {
      display: none;
    }
}

モバイル以外はメディアクエリで動画部分を復活させます。

/*scss*/
.video-wrap {
    background: url(./img/hoge.jpg);
    background-size: cover;

    video {
        display: none;
    }
}

wrapしているdivに背景画像をしく。

ここまでを一連にしておかないとダメっぽい。

wrapしてるdivの背景に画像を引くと、ビデオが読み込まれるまでに表示されてちらつくので、背景画像もメディアクエリで表示を制御。

jsでロード完了時に出す、とかも手でしょうね。

スポンサーリンク

最終的には

/*scss*/
/*全画面背景ビデオ真ん中寄せ*/
.video-wrap {
  /*scss*/
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
    background-image: url(../img/hoge.jpg);
    background-size: cover;

    @media(min-width:992px) {
        background-image: none;
    }

    video {
        display: none;
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);

        @media(min-width:992px) {
            display: block;
        }
    }
}

こういうコードで落ち着きました。

コメントを残す