Question

所以我有这个视频元素以一定数量的页面宽度为中心，但并非总是如此。元素已旋转，如果页面宽度低于元素长度，则事物不再正确居中。这很难解释，但这里是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;
}

Answer 1

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

Answer 2

您可以尝试将视频包装在容器中并执行类似的操作

.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%;
}

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

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

2 个答案: