Responsive Video nicht wie erwartet anpassen

Mein Hauptziel war Archieved, ich wollte ein Hintergrundvideo auf der Oberseite meiner Seite haben, aber das Problem ist jetzt, dass ich möchte, dass das Video reagiert, es ist irgendwie reagiert aber in Der falsche Weg, wenn ich den Bildschirm verkleinere das Video wird kleiner, anstatt die Höhe zu erhöhen, was passiert nur, dass die Breite und die Höhe kleiner werden, ich will nur die Breite kleiner und die Höhe zu erhöhen. HierResponsive Video nicht wie erwartet anpassen

ist ein Beispiel:

Aktuelles Verhalten:

Was ich brauche:

Mein HTML-Code:

<section class="custom content_section bg_fixed white_section bg2"> 
     <div class="embed-responsive embed-responsive-16by9"> 


      <div id="video_overlays"></div> 

      <div class="container vertical-center"> 
       <div id="over"> 
        <div class="title-wrapper main_title centered upper"> 
         <h2 id="video_title"><span class="line"></span>VIDEO TITLE</h2> 
        </div> 

        <div class="description4 centered"> 
         <p id="video_sub_title"><b>LOREM IPSUM A SIMPLE DESCRIPTION<br> 
Usability and simple deployment are the key words.</b></p> 

        </div> 
       </div> 
      </div> 
      <div id="player" width="100%" height="100%" style="z-index:-1"> 
      </div> 
     </div> 

    </section>

Quelle

2017-04-10 Anonymous

Hier ist ein funktionierendes Beispiel:

http://codepen.io/panchroma/pen/YVKNdr

Versuchen Sie, die folgende Styling für die div Ihr Video zu halten. Die wichtigsten Punkte sind, dass Sie min-height und min-width auf 100% setzen und dann transform: translate verwenden, um das Video zu zentrieren.

Hoffe, das hilft!

CSS

#player { 
    position: fixed; 
    top: 50%; left: 50%; 
    z-index: -1; 
    min-width: 100%; 
    min-height: 100%; 
    width: auto; 
    height: auto; 
    transform: translate(-50%, -50%); 
}

Quelle

2017-04-11 01:09:13

funktioniert nicht: S gleichen Effekt, ich habe versucht, das auf dem Elternteil div, aber das Video nur verschwindet –

bitte updae oben @FilipeCosta –

fast zu lösen, muss ich meine Klassen einbetten-responsive und den Aspekt zu löschen Verhältnis 1, aber immer noch 1 Problem mit dem Seitenverhältnis jetzt, wenn ich die Größe verkleinern sehe ich die schwarzen Ränder oben und unten, gibt es eine einfache Möglichkeit, dies zu korrigieren? –

Versuchen Sie dieses

CSS

#videocontainer{ 
    position:absolute; 
    z-index:-1; 
    background:url(../the link to image when video uploads or not supported by browser.jpg) center center no-repeat; 
    background-size:cover; 
    width:100%; 
    height:100%; 
} 
.videobg { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    min-width: 100%; 
    min-height: 100%; 
    width: auto; 
    height: auto; 
    z-index: -100; 
    transform: translateX(-50%) translateY(-50%); 
    background-size: cover; 
    transition: 1s opacity; 
    z-index: 1; 
}

Ihre HTML

<div class="videocontainer> 
    <video class="videobg" controls autoplay loop id=player poster="http://the link to image when video uploads or not supported by browser" > 
     <source src="link to your mp4 video file.mp4" type="video/mp4" > 
    </video> 
</div>

Quelle

2017-04-11 12:02:24

Responsive Video nicht wie erwartet anpassen

Antwort

Verwandte Themen