web-dev-qa-db-fra.com

utiliser la vidéo comme arrière-plan pour div

J'aimerais utiliser une vidéo comme arrière-plan dans CSS3. Je sais qu'il n'y a pas de propriété background-video, mais est-il possible de faire ce comportement. L'utilisation d'un tag vidéo en taille réelle ne donne pas le résultat souhaité, car un contenu doit être affiché sur la vidéo.

Ce doit être non JS. Si ce n'est pas possible, je dois effectuer des modifications sur mes serveurs et donner également une capture d'écran de la vidéo.

J'ai besoin de la vidéo pour remplacer les cases colorées:

Boxes

Les cases colorées sont simplement des boîtes, des boîtes CSS.

html5css3html5-video
16
Knerd

Pourquoi ne pas réparer un <video> et utiliser z-index:-1 pour le placer derrière tous les autres éléments?

html, body { width:100%; height:100%; margin:0; padding:0; }

<div style="position: fixed; top: 0; width: 100%; height: 100%; z-index: -1;">
    <video id="video" style="width:100%; height:100%">
        ....
    </video>
</div>
<div class='content'>
    ....

Démo

Si vous le souhaitez dans un conteneur, vous devez ajouter un élément de conteneur et un peu plus de CSS

/* HTML */
<div class='vidContain'>
    <div class='vid'>
        <video> ... </video>
    </div>
    <div class='content'> ... The rest of your content ... </div>
</div>

/* CSS */
.vidContain {
    width:300px; height:200px;
    position:relative;
    display:inline-block;
    margin:10px;
}
.vid {
    position: absolute; 
    top: 0; left:0;
    width: 100%; height: 100%; 
    z-index: -1;
}    
.content {
    position:absolute;
    top:0; left:0;
    background: black;
    color:white;
}

Démo

16
Zach Saucier

Je crois que c'est ce que vous recherchez. Il a automatiquement mis à l'échelle la vidéo pour l'adapter au conteneur.

DEMO: http://jsfiddle.net/t8qhgxuy/

La vidéo doit avoir la hauteur et la largeur toujours définies à 100% du parent.

HTML:

<div class="one"> CONTENT OVER VIDEO
    <video class="video-background" no-controls autoplay src="https://dl.dropboxusercontent.com/u/8974822/cloud-troopers-video.mp4" poster="http://thumb.multicastmedia.com/thumbs/aid/w/h/t1351705158/1571585.jpg"></video>
</div>

<div class="two">
    <video class="video-background" no-controls autoplay src="https://dl.dropboxusercontent.com/u/8974822/cloud-troopers-video.mp4" poster="http://thumb.multicastmedia.com/thumbs/aid/w/h/t1351705158/1571585.jpg"></video> CONTENT OVER VIDEO
</div>

CSS:

body {
    overflow: scroll;
    padding:  60px 20px;
}

.one {
    width: 90%;
    height: 30vw;
    overflow: hidden;
    border: 15px solid red;
    margin-bottom: 40px;
    position: relative;
}

.two{
    width: 30%;
    height: 300px;
    overflow: hidden;
    border: 15px solid blue;
    position: relative;
}

.video-background { /* class name used in javascript too */
    width: 100%; /* width needs to be set to 100% */
    height: 100%; /* height needs to be set to 100% */
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}

JS:

function scaleToFill() {
    $('video.video-background').each(function(index, videoTag) {
       var $video = $(videoTag),
           videoRatio = videoTag.videoWidth / videoTag.videoHeight,
           tagRatio = $video.width() / $video.height(),
           val;

       if (videoRatio < tagRatio) {
           val = tagRatio / videoRatio * 1.02; <!-- size increased by 2% because value is not fine enough and sometimes leaves a couple of white pixels at the edges -->
       } else if (tagRatio < videoRatio) {
           val = videoRatio / tagRatio * 1.02;
       }

       $video.css('transform','scale(' + val  + ',' + val + ')');

    });    
}

$(function () {
    scaleToFill();

    $('.video-background').on('loadeddata', scaleToFill);

    $(window).resize(function() {
        scaleToFill();
    });
});
17
marcel_pi

Vous pouvez facilement définir une vidéo comme arrière-plan d'un élément HTML grâce à la propriété CSS transform.

Ce code centre la vidéo dans une div avec la classe video-container couvrant toute sa zone, comme le fait backgoround-position: center center; background-size: cover; pour les images.

Vous pouvez également utiliser la technologie transform pour centrer verticalement et horizontalement n’importe quel élément HTML. 

<style>
.video-container {
    height: 500px;
    width: 500px;
    overflow: hidden;
    position: relative;
}

video {
  min-width: 100%;
  min-height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}
</style>

<div class="video-container">
    <video autoplay muted loop>
        <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
    </video>
    <h2>Your caption here</h2>
</div>
0
campsjos