Поворот видео и подходит к экрану с помощью CSS

Question

У меня есть следующий стиль:

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

Это видео элемент

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

И это, кажется, поворот и центрирования видео, но это почти 1/4 его размера. Как сделать его пригодным для экранирования?

Answer 1

Это случай, когда новые элементы CSS3 пригождаются. Если вы просто используете нормальные проценты, чтобы указать width и height элемента <video>, они будут по умолчанию связывать эти измерения с их сопоставлениями в видовом экране - но только до поворота. Поэтому после поворота эти значения больше не будут корректно соответствовать размерам видовых экранов.

Так как вы на самом деле хотите, наоборот, в данном случае, вы можете использовать height: 100vw и width: 100vh явно указать, что вы хотите height измеренное по ширине окна просмотра, и width с точки зрения высоты видового экрана.

При правильной калибровке вам также потребуется изменить точку, вокруг которой поворачивается видео. В противном случае, становится трудно выровнять края видео с краями окна просмотра, как показано в этом квалифицированно умыслом Наглядный пример:

После этой регулировки, последний шаг просто переместить видео вверх на определенную величину, чтобы сделать его flush против верхней части окна просмотра. Сколько стоит эта сумма? Ну, 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>

Надеется, что это помогает! Дайте знать, если у вас появятся вопросы.