web-dev-qa-db-de.com

video als Hintergrund für div verwenden

Ich möchte ein Video als Hintergrund in CSS3 verwenden. Ich weiß, dass es keine Hintergrundvideo-Eigenschaft gibt, aber ist es möglich, dieses Verhalten auszuführen. Die Verwendung eines Fullsize-Videotags führt nicht zum gewünschten Ergebnis, da es Inhalte gibt, die über dem Video angezeigt werden müssen.

Es muss nicht JS sein. Wenn dies nicht möglich ist, muss ich auf meiner Server-Seite Änderungen vornehmen und als Ergebnis auch einen Screenshot des Videos angeben.

Ich brauche das Video, um die farbigen Kästchen zu ersetzen:

Boxes

Die farbigen Boxen sind nur atm, CSS-Boxen.

16
Knerd

Warum nicht einen <video> reparieren und z-index:-1 verwenden, um ihn hinter alle anderen Elemente zu stellen?

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'>
    ....

Demo

Wenn Sie es in einem Container haben möchten, müssen Sie ein Containerelement und etwas mehr CSS hinzufügen

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

Demo

16
Zach Saucier

Ich glaube, das ist, wonach Sie suchen. Das Video wurde automatisch an den Container angepasst.

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

Für Video müssen Höhe und Breite immer auf 100% des übergeordneten Elements eingestellt sein.

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

Dank der CSS-Eigenschaft transform können Sie ein Video problemlos als Hintergrund für jedes HTML-Element festlegen.

Dieser Code zentriert das Video in einem div mit der Klasse video-container, die den gesamten Bereich abdeckt, genau wie backgoround-position: center center; background-size: cover; für Bilder.

Sie können auch die Techinque transform verwenden, um jedes HTML-Element vertikal und horizontal zu zentrieren. 

<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