Отзывчивый герой с фоном Vimeo
Я пытаюсь воспроизвести background-size: cover; с видео Vimeo в разделе героев моего веб-сайта. Я могу заставить видео сидеть красиво, но оно не масштабируется должным образом на маленьких экранах.
Вот что у меня есть на данный момент:
HTML:
<div id = "vimeohero">
<iframe src = "https://player.vimeo.com/video/319007333?background=1" frameborder = "0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
CSS:
#vimeohero {
height: 300px;
}
iframe {
width: 100vw;
height: 56.25vw; // Given a 16:9 aspect ratio, 9/16*100 = 56.25
min-height: 100vh;
min-width: 177.77vh; // Given a 16:9 aspect ratio, 16/9*100 = 177.77
position: relative;
top: 50%;
left: 50%;
transform: perspective(1px) translate(-50%, -50%);
}
https://jsfiddle.net/a7j0rbmq/1/
Когда вы смотрите на это на маленьком экране (375 на 812 пикселей), видео увеличено и не отображается так, как background-size: cover;.
(Очевидно, что видео придется немного увеличить, чтобы заполнить пространство, но это увеличивает больше, чем необходимо. Если вы измените высоту экрана, чтобы она соответствовала высоте div (300 пикселей), он отображается нормально).
Если вы удалите объявление min-width, это почти решит проблему, однако на некоторых размерах экрана вы получите пробелы по обе стороны от видео :(
Ответы 2
#vimeohero {
height: 100vh;
width: 100%;
overflow: hidden;
}
iframe {
width: 100vw;
height: 56.25vw;
min-height: 100vh;
min-width: 177.77vh;
}
*{
padding:0;
margin:0;
}<div id = "vimeohero">
<iframe src = "https://player.vimeo.com/video/319007333?background=1" frameborder = "0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>удалите отступы и поля для всех элементов, чтобы решить эту проблему!
Вам нужно внести несколько изменений в свой css, чтобы добиться того, что вы ищете.
Отредактировано: скорректирована высота до 300 пикселей.
#vimeohero {
background: #eee;
height: 300px;
overflow: hidden;
padding: 0;
position: relative;
}
iframe {
box-sizing: border-box;
height: 56.25vw;
left: 50%;
min-height: 100%;
min-width: 100%;
transform: translate(-50%, -50%);
position: absolute;
top: 50%;
width: 177.77777778vh;
}<div id = "vimeohero">
<iframe src = "https://player.vimeo.com/video/319007333?background=1" frameborder = "0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>Фрагмент не показывает видео, смотрите на codepen.
https://codepen.io/flavio-caruso/pen/WBKZqY
Я изменил высоту #vimeohero на 300 пикселей, и он работает как надо :) Поиграйте здесь: jsfiddle.net/mkbywf0e
Здорово! Я рад помочь! Я отредактирую вопрос, чтобы объяснить все, когда у меня будет время.
Привет, круто. Не могли бы вы объяснить, какие мысли стоят за цифрами? Это основано на соотношении сторон исходного видео?
Высота #vimeohero должна быть 300 пикселей. Это не уменьшается, когда это изменяется.