CSS - 100% ширина видео на YouTube - PullRequest
Новая
       31

CSS - 100% ширина видео на YouTube

0 голосов
/ 18 сентября 2018

HTML: 

<div class="video">
  <iframe src="https://www.youtube.com/embed/bRhZUF47p2E?version=3&amp;rel=0&amp;controls=0&amp;showinfo=0&amp;autoplay=1&amp;mute=1&amp;loop=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>

CSS: 

.video {
  width: 100%;
  height: 200px;
  border: 1px solid red;
  overflow: hidden;
  position: relative;
}
iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

JSFIDDLE: http://jsfiddle.net/pj2utq4v/

ВОПРОС: Как заставить iframe быть равным 100% ширины родительского div.Так как родительский div имеет высоту всего 200 пикселей, видео iframe будет обрезано, что тоже хорошо для меня.

Ответы [ 3 ]

0 голосов
/ 18 сентября 2018

Вы можете сделать это, немного изменив свои классы CSS: 

.video {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}

iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

JSFIDDLE : http://jsfiddle.net/pj2utq4v/1

0 голосов
/ 18 сентября 2018

Добавлен еще один div с скрытым переполнением и фиксированной высотой, и он работает. 

<div style="height: 200px; overflow: hidden">
  <div class="video">
    <iframe src="https://www.youtube.com/embed/bRhZUF47p2E?version=3&amp;rel=0&amp;controls=0&amp;showinfo=0&amp;autoplay=1&amp;mute=1&amp;loop=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
  </div>
</div>
<style>
.video {
  width: 100%;
  height: 200px;
  border: 1px solid red;
  overflow: hidden;
  position: relative;
}
iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>

http://jsfiddle.net/pj2utq4v/

0 голосов
/ 18 сентября 2018

Есть ли причина, по которой вы хотите использовать iframes?Я бы попробовал использовать видео тег HTML5.Вот пример: https://www.w3schools.com/html/html5_video.asp затем установите ширину вашего видео на 100% следующим образом: 

<video width="100%" controls>
  <source src="mov_bbb.mp4" type="video/mp4">
  <source src="mov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>
...