CSS eines Videos Höhe vom Boden einstellen, ohne die Videoposition Einstellen

Question

ich HTML-Code haben:

<div style="width:100vw;height:100vw;position:fixed"> 
    <video autoplay loop> 
    <source src="videos/test.mp4" type="video/mp4"> 
    </video> 
</div> 

Es zeigt die video in Ordnung. Nun, was ich tun muss, ist das Video height zu einem beliebigen % schneiden, ohne die Originalgröße des video zu ändern.

Zum Beispiel ist es das, was es zur Zeit

Jetzt muss ich jetzt etwas CSS ändern sieht so die video zeigt nur dieser Teil in Rot:

Wenn ich Machen Sie die height zu sagen 50% der video Element es ändert sich die Größe der video auch was ist nicht was ich erreichen möchte.

Auch mein Ziel ist es, diese Eigenschaft dynamisch zu ändern, so dass ich nicht zwei div s oder so etwas erstellen kann.

Irgendwelche Lösungen?

Answer 1

Meine Lösung: https://jsfiddle.net/2kv6Ldom/1/

<div class="container"> 
     <div class="videoWrapper"> 
      <video autoplay src="http://html5demos.com/assets/dizzy.mp4"></video> 
     </div> 
    </div> 

.container { 
    width: 100vw; 
    height: 100vh; 
} 

.videoWrapper { 
    width: 100vw; 
    height: 50vh; 
    overflow: hidden; 
} 

video { 
    width: 100vw; 
    height: 100vh; 
} 

Answer 2

Sie können padding-bottom verwenden, um "fake" die height so dass es in Reaktion

body { 
 
    margin: 0 
 
} 
 
.container { 
 
    position: relative; 
 
    /* 16/9 AR */ 
 
    padding-bottom: 56.25%; 
 
    height: 0; 
 
    overflow: hidden; 
 
    max-width: 100%; 
 
} 
 
.container iframe { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100% 
 
}

<div class="container"> 
 
    <iframe src="http://www.youtube.com/embed/QILiHiTD3uc" frameborder='0' allowfullscreen></iframe> 
 
</div>