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;}

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.