Как сделать так, чтобы высота блока видео с ютуба определялась размерами экрана?

390

18 февраля 2017, 07:28

Есть блок с зацикленным видео с ютуба Фидл

<iframe class="inner" frameborder="0" allowfullscreen="1" title="YouTube video player" width="100%" height="100%" src="https://www.youtube.com/embed/TP1U4fySrCI?playlist=TP1U4fySrCI&iv_load_policy=3&enablejsapi=1&disablekb=1&autoplay=1&controls=0&showinfo=0&rel=0&loop=1&wmode=transparent&origin=http%3A%2F%2Flike2.likemedia.by&widgetid=1"
      id="widget2" style="max-width: 1000%;  width: 100%; height: 785.25px;"></iframe>

Как сделать так, чтобы в зависимости от разрешения экрана высота сама подстраивалась, не обрезалась картинка и не возникало черных полос?

Answer 1

Можно сделать так:

document.getElementById('widget2').height = window.innerHeight;

Answer 2

Решений 2: 1 - воспользоваться библиотекой fitvids 2 - с помощью css-трюка - фидл

.videoWrapper { 
  position: relative; 
  padding-bottom: 56.25%; 
  /* 16:9 */ 
  padding-top: 25px; 
  height: 0; 
} 
 
.videoWrapper iframe { 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
}

<div class="videoWrapper"> 
  <iframe class="inner" frameborder="0" allowfullscreen="1" title="YouTube video player" width="100%" height="100%" src="https://www.youtube.com/embed/TP1U4fySrCI?playlist=TP1U4fySrCI&iv_load_policy=3&enablejsapi=1&disablekb=1&autoplay=1&controls=0&showinfo=0&rel=0&loop=1&wmode=transparent&origin=http%3A%2F%2Flike2.likemedia.by&widgetid=1"></iframe></div>