视频元素不完全以所有宽度为中心

所以我有这个视频元素是以页面宽度为中心的，但并非总是如此。该元素已被旋转，并且如果页面的宽度低于元素的长度，则事物不再居中。这很难解释，但这里的的jsfiddle：视频元素不完全以所有宽度为中心

可以往下缩输出窗口宽度方向（使其瘦），看看事情是如何不再居中。

发布代码在这里还有：

<body class="main-container"> 
<div class="centered" id="location-header"> 
    Seattle 
</div> 
<div id="clicktargetcontainer"> 
    <video loop muted id="mainvideo" src="http://player.vimeo.com/external/123836285.hd.mp4?s=6ddd98cc75f1bb6fb776369a8fa372bf&profile_id=113" type="video/mp4" webkit-playsinline="webkit-playsinline"e ad-outlet="video"> 
     Your browser does not support HTML5 video. 
    </video> 
</div> 
</body>

而这里的CSS，以及：

video { 
    overflow: hidden; 
    position: absolute; 
    height: 56.25%; 
    margin: auto; 
    top:0; 
    bottom:0; 
    left:0; 
    right:0; 
    transform:rotate(90deg); 
    -webkit-transform:rotate(90deg); 

} 

.main-container { 
    min-height: 100%; 
    position: relative; 
    background: #000; 
}

来源

2015-06-19 John Morrow

所以我研究了这一点，我认为在HTML/CSS中有一个错误，或者只是一个不方便的设计决定。如果您拍摄风景视频，然后将其旋转90度（以使其处于纵向），则视频元素仍然按照视频未旋转的方式布置。我认为可能有一些方法可以改变这种定位，这不是问题，但是当我尝试这样做时，它会在页面上的其他元素上创建许多其他问题。我最终做的是用视频编辑软件旋转我的所有视频内容并对其进行重新编码。然后我不再需要使用CSS旋转并且宽度是正确的。

来源

2015-10-23 08:29:42

-1

您可以尝试在容器包装的视频，做这样的事情

.video_contain { 
position: absolute; 
top: -50%; 
left: -50%; 
width: 200%; 
height: 200%; 
} 

video { 
position: absolute; 
top: 0; 
bottom: 0; 
right: 0; 
left: 0; 
margin: auto; 
min-height: 50%; 
min-width: 50%; 
}

虽然视频在遇到最小尺寸时仍会停止缩放 - 这可能是您遇到的问题的一部分咏。

来源

2015-06-19 23:56:43 ajmajmajma

视频元素不完全以所有宽度为中心

回答

相关问题