HTML5のvideoを画面いっぱいの背景にする方法

WS003061
このエントリーをはてなブックマークに追加
PR
DEMO 表示

HTML5のvideoタグを使って、ブラウザの画面いっぱいに動画を背景として流す方法です。

videoタグとちょっとのCSSで実現可能です。

 

コード

HTML

<video autoplay="" loop="" poster="http://artbees.net/themes/jupiter-demo/wp-content/uploads/2013/10/home-vid-img.jpg" id="bgvid">
    <source src="http://artbees.net/themes/jupiter-demo/wp-content/uploads/2013/10/homepage.webm" type="video/webm">
    <source src="http://artbees.net/themes/jupiter-demo/wp-content/uploads/2013/10/shutterstock_v3702740_4.m4v" type="video/mp4">
</video>

videoタグ内に動画のへのリンクをsourceタグで記入
sourceタグに2つの動画のがあるのは、webmとmp4それぞれ一方しか再生できないブラウザに対応するため

 

CSS

video {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    background-size: cover;
}

CSSではpositionでfixedで絶対値で左上を起点に上下左右を100%の長さにして全画面に。
あとはcoverで画面サイズに合わせてアスペクト比を保ったまま適当に表示できるように

 

 

このコードの元記事はこちら。元記事ではIE8への対応方法も載せられています

http://demosthenes.info/blog/777/Create-Fullscreen-HTML5-Page-Background-Video

PR

COMMENT

  1. ななし

    background-size:は効かないんじゃないの?

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)