Отзывчивый iframe (YouTube / Vimeo Embed), который принимает высоту, а не ширину - PullRequest
Новая
       18

Отзывчивый iframe (YouTube / Vimeo Embed), который принимает высоту, а не ширину

0 голосов
/ 21 января 2019

У меня есть содержащий элемент, высота которого будет изменяться в зависимости от ширины области просмотра. В него будет загружено видео с vimeo и youtube.

То, что я хочу сделать, - это создать адаптивную вставку, которая содержит соотношение сторон видео на основе высоты.

Мне известен обычный метод, использующий высоту: 0 и отступ в нижней части, основанный на процентах, позволяющий устанавливать ширину по мере необходимости, но это не совсем то, что мне нужно.

Я хочу иметь возможность указать высоту и автоматически рассчитать ширину элемента. Это возможно в css или мне нужно прибегнуть к js?

Ответы [ 2 ]

0 голосов
/ 21 января 2019

Вы можете попробовать 

.responsive-iframe {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

Вы можете использовать Bootstrap 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
</div>
0 голосов
/ 21 января 2019

Вы можете сделать это с помощью CSS. Просто поместите height:100vh или любую другую высоту, которую вы хотите, и width:100% на вашем носителе, и она будет принимать высоту области просмотра и ширину родительского элемента. Затем вы можете использовать свойство background-size, чтобы носители сохраняли свое соотношение: https://developer.mozilla.org/fr/docs/Web/CSS/background-size

Дайте мне знать, если вам нужна дополнительная помощь!

...