0

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

<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>

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

4
  • у вас видео такого размера отснято и монитор здесь не причем, скорее всего вы хотите выставить размер плеера под размер снятого видео... а это уже не под область монитора (если сомневаетесь в моих словах - подумайте как ваше видео будет смотреться на больших мониторах) выставить размер iframe под монитор это одно, а вычислить размер показываемого в плеере видео это другое 17 фев 2017 в 8:57
  • @Jenyokcoder нет, это не видео так снято - посмотрите пожалуйста внимательно уже найденные решения
    – Вася
    17 фев 2017 в 9:07
  • если это не видео такого размера (что за черные полоски сверху и снизу?) это риторический вопрос, дабы избежать демагогии... 17 фев 2017 в 9:13
  • @Jenyokcoder заданная высота height: 785.25px; если ее не задавать, то видео вовсе не отобразится на странице
    – Вася
    17 фев 2017 в 9:14

3 ответа 3

1

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

document.getElementById('widget2').height = window.innerHeight;
1
  • вот так? jsfiddle.net/mfh26hvc/3 но, это несколько не то - выглядит адекватнее, но черные полосы никуда не исчезли. решение внизу
    – Вася
    17 фев 2017 в 9:13
0

Решений 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>

-1

Попробуйте vh и vw:

height: 100vh;
width: 100vw;
1
  • Постарайтесь писать более развернутые ответы. Поясните, на чем основано ваше утверждение? 20 фев 2017 в 6:48

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.