CSS调整从底部视频的高度不调整视频位置

我有这样的HTML代码：CSS调整从底部视频的高度不调整视频位置

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

它显示video罚款。现在我需要做的是将视频的height剪切到任何%而不改变video的原始尺寸。

例如，这是个什么样子目前

现在我需要改变一些CSS所以现在的video只显示这部分RED：

如果我使height说video元素的50%它也改变了video的大小，这也是不是我想要达到的目标。

另外我的目标是改变这个属性的动态，所以我不能创建两个div或类似的东西。

任何解决方案？

来源

2016-06-21 user3650664

问题寻求代码的帮助必须包括最短的代码必须在问题本身**首选中重现** bly在[** Stack Snippet **]（https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/）。请参阅[**如何创建最小，完整和可验证的示例**]（http://stackoverflow.com/help/mcve） –

我的解决办法： 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; 
}

来源

2016-06-21 15:11:34

可以使用padding-bottom为 “假的” height使其响应

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>

来源

2016-06-21 14:41:37 dippas

当我使用此解决方案调整浏览器大小时，它变得很奇怪。我将无法使用％，而是使用固定的填充底部。 – user3650664

这样怎么..？ – dippas

http://prntscr.com/bj5igz这是浏览器调整大小时的样子。现在，浏览器调整为不同的分辨率时，它的外观如何：http://prntscr.com/bj5ke2。填充底部是50％。有没有办法解决这个问题？ – user3650664

CSS调整从底部视频的高度不调整视频位置

回答

相关问题