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

Je voudrais utiliser une vidéo comme arrière-plan en CSS3. Je sais qu'il n'y a pas d'arrière-plan-vidéo de la propriété, mais est-il possible de faire de ce comportement. À l'aide d'une pleine taille de la vidéo-tag ne donne pas le résultat voulu, la cause il ya de contenu qui doivent être affichées au-dessus de la vidéo.

Il faut être non JS. Si il n'est pas possible, alors j'ai besoin de faire des modifications sur mon serverside un donner comme résultat aussi une capture d'écran de la vidéo.

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

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

Les cases de couleur sont atm juste, CSS boîtes.

source d'informationauteur Knerd

  1. 13

    Pourquoi ne pas fixer un <video> et l'utilisation z-index:-1 mettre 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 voulez à l'intérieur d'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

  2. 14

    Je crois que c'est ce que vous cherchez. Il est automatiquement mis à l'échelle de la vidéo pour s'adapter à l'conteneur.

    DÉMO: http://jsfiddle.net/t8qhgxuy/

    Vidéo avez besoin de la hauteur et de la largeur toujours à 100% de la société mère.

    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();
    });
});
  3. 0

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

    Ce code des centres de la vidéo à l'intérieur d'un div avec la classe video-container couvrant l'ensemble de sa région, tout comme backgoround-position: center center; background-size: cover; fait pour les images.

    Vous pouvez également utiliser le transform techinque pour centrer verticalement et horizontalement de tout é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>