un background video html5

Appliquer un background video html5 sur son site

Un background video en full-width

Voici le code qu’on peut facilement trouver pour mettre une vidéo en fond d’écran de son site, en mode html5 :

<div class="header-unit " >
    <div id="video-container">
        <video autoplay loop class="fillWidth" >
            <!--poster="images/soleil.png-->
            <source src="http://localhost/sefrisim/background/keyboard.mp4" type="video/mp4"/>
            <source src="http://localhost/sefrisim/background/keyboard.oggtheora.ogv" type="video/ogg"/>
            <source src="http://localhost/sefrisim/background/keyboard.webmhd.webm" type="video/webm"/>
            Your browser does not support the video tag. I suggest you upgrade your browser.
        </video>
        <!--[if lte IE 6 ]>
                <embed src="http://www.youtube.com/v/_etwz7NkemE&hl=fr" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed>
        <![endif]-->
    </div>
</div>

Il existe de nombreux logiciels pour convertir vos vidéos.(EasyHtll5 Video)

Et voici le css qu’on va appliquer pour que notre vidéo se cale en fond sur toute la fenêtre, en mode full-width:

.header-unit{	top:0%;left:0%;height:100%;width:100%;overflow: hidden;  position:absolute;background-size: cover;margin-left:auto;margin-right:auto;}
video {	position: absolute;z-index: -1;}
video.fillWidth {width: 100%;min-height: 100%;}
#video-container { top:0%; left:0%; height:100%; width:100%; overflow: hidden; background-size:cover}

Une vidéo responsive

Pour une version responsive, le code est à modifier de la façon suivante:

 <div class="video-container">
        <video autoplay loop poster="../images/images/background_teasing.jpg.jpg" id="bgvid" class='fillWidth' >
            <!--poster="images/soleil.png-->
            <source src="http://localhost/sefrisim/background/keyboard.webmhd.webm" type="video/webm"/>
            <source src="http://localhost/sefrisim/background/keyboard.mp4" type="video/mp4"/>
            <source src="http://localhost/sefrisim/background/keyboard.oggtheora.ogv" type="video/ogg"/>

            Your browser does not support the video tag. I suggest you upgrade your browser.
        </video>
        <!--[if lte IE 6 ]>
                <embed src="http://www.youtube.com/v/_etwz7NkemE&hl=fr" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed>
        <![endif]-->
    </div>

et la partie css:

#bgvid{position:fixed;right:0;bottom:0;
min-width:100%;min-height:100%;
width:auto;height:auto; z-index:-999;
overflow:hidden;
background:url(../images/background_teasing.jpg) no-repeat;
background-size:cover;}
video{display:block;}

Mis à jour le Par Copier coller | Dans CSS