hintergrund video css (nicht fullscreen)

Question

Guten tag an alle! Ich habe eine Frage zu Hintergrund-Video, ich habe es an die ganze Seite angehängt, aber ich brauche es nur um oben eingebettet zu werden. Kann mir jemand sagen, wo ist das Problem? Vielen Dank! HTML:

<video autoplay loop poster="video-bg.jpg" id="bgvid"> 
    <source src="video-bg.webm" type="video/webm"> 
    <source src="video-bg.mp4" type="video/mp4"> 
</video> 

CSS:

video#bgvid { 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    min-width: 100%; 
    min-height: 100%; 
    width: auto; 
    height: auto; 
    z-index: -100; 
    -ms-transform: translateX(-50%) translateY(-50%); 
    -moz-transform: translateX(-50%) translateY(-50%); 
    -webkit-transform: translateX(-50%) translateY(-50%); 
    transform: translateX(-50%) translateY(-50%); 
    background: url(video-bg.jpg) no-repeat; 
    background-size: cover; 
} 
@media screen and (max-device-width: 800px) { 
    html { 
     background: url(video-bg.jpg) #000 no-repeat center center fixed; 
    } 
    #bgvid { 
     display: none; 
    } 
} 

Answer 1

Entfernen Sie zuerst min-width/height: 100%;
als transform: translateX(-50%) translateY(-50%); Element mit transform: translateX(-50%); ersetzen nur dann ändern, horizontal
Schließlich top: 50%;-top: 0;

zu bewegen Wenn Sie auch Video blättern, wenn Seite Scrollen ersetzen position: fixed mit position: absolute;

#bgvid { 
 
    background: none #aaa !important; 
 
    text-align: center; 
 
    width: 300px; 
 
    height: 150px; 
 
} 
 
#bgvid { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 50%; 
 
    /*min-width: 100%;*/ 
 
    /*min-height: 100%;*/ 
 
    -ms-transform: translateX(-50%); 
 
    -moz-transform: translateX(-50%); 
 
    -webkit-transform: translateX(-50%); 
 
    transform: translateX(-50%); 
 
    z-index: -100; 
 
    background: url(video-bg.jpg) no-repeat; 
 
    background-size: cover; 
 
} 
 
@media screen and (max-device-width: 800px) { 
 
    html { 
 
     background: url(video-bg.jpg) #000 no-repeat center center fixed; 
 
    } 
 
    #bgvid { 
 
     display: none; 
 
    } 
 
}

<div id="bgvid">VIDEO HERE</div>

Answer 2

Position fixiert ist, so wird es auf die ganze Seite festgelegt werden. Verwenden Sie position: absolute; auch ändern Sie die Höhe & Breite.