旋转视频，并配合使用CSS

我有以下样式来筛选：旋转视频，并配合使用CSS

video { 
    position:absolute; 
    transform:rotate(90deg); 
    width: 100%;    
    height: 100%; 
    z-index:4; 
    visibility : visible; 
}

这是视频元素

<video id="myVideo" src = "/Space4.mp4" autoplay loop></video>

，这似乎旋转和中部的视频，但它几乎是其大小的四分之一。如何使它适合屏幕？

来源

2016-01-29 Pavan K

我创建了一个[JSFiddle]（https://jsfiddle.net/gsrh7xgy/）。这似乎并没有发生... – Druzion

我想拉伸和适合全屏视频 –

垂直或水平？ – Nikola

这是一个新的CSS3单元派上用场的例子。如果您只是使用普通百分比来指定<video>元素的width和height，则它们将默认将这些尺寸与其视口对应物相关联 - 但仅限于旋转之前。因此旋转后，这些值将不再正确对应于视口尺寸。

既然你真的想在这种情况下，相反，你可以使用height: 100vw和width: 100vh明确指定要height视口宽度来衡量，并在width视高度的条款。

使用正确的大小，您还需要更改视频旋转的点。否则，则难以对准与视口的边缘上的视频的边缘，如本专业地加工视觉例如：

enter image description here

接着调整，最后一步就是以移动视频向上移动一定量，以使其与视口顶部齐平。这个数额是多少？那么，视频的height - 我们指定为100vw。（我用这个负margin-top）

实现这些变化（并设置object-fit: cover所以没有空格是可见的），我们最终得到：

html, 
 
body { 
 
    margin: 0; /* Because annoying default browser margins */ 
 
} 
 
video { 
 
    position: absolute; 
 
    transform: rotate(90deg); 
 

 
    transform-origin: bottom left; 
 
    width: 100vh; 
 
    height: 100vw; 
 
    margin-top: -100vw; 
 
    object-fit: cover; 
 

 
    z-index: 4; 
 
    visibility: visible; 
 
}

<video id="myVideo" src="http://html5demos.com/assets/dizzy.mp4" autoplay loop></video>

希望这有助于！如果您有任何问题，请告诉我。

来源

2016-01-29 16:48:47 Serlite

旋转视频，并配合使用CSS

回答

相关问题