Как встроить YouTube iframe видео 100% полной ширины

Question

Просто подумал, что кому-то будет интересно узнать, как встроить iframe YouTube или любое видео в формате 16: 9 (например, живой виджет Twitch, Vimeo et c.)

YouTube обычно дает вам видео фиксированного размера width="560" height="315". Но обычно люди хотят встроить его в полную ширину, чтобы он выглядел хорошо, а также отзывчивым.

Но установка его на 100vw просто испортит сайт, когда он выходит из контейнера, а также высота не может быть определяется.

Таким образом, iframe должен иметь ширину 100% в соответствии с его контейнером, что можно сделать, просто добавив width="100%". Но высота все еще испорчена, установка ее на 100% не будет работать.

И она должна работать, когда зритель меняет размер экрана, перемещая телефон из вертикального в горизонтальное положение или увеличивая windows.

Answer 1

Лично, когда мне приходится иметь дело с встраиванием видео на YouTube, я использую fitVids JS, я просто помещаю код встраивания в div с шириной, которую я хочу, чтобы видео отображалось, и затем вызываю fitVids ( ), который позаботится об этом, сохраняя соотношение сторон 16: 9 и поддерживая его отзывчивым, когда пользователь изменяет размер страницы.

Короче говоря, код будет выглядеть следующим образом, не забудьте загрузить fitVid Js на вашей странице

$(document).ready(function(){
  $('.youtube-video').fitVids();
});

.youtube-video{
  width: 85%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="youtube-video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

До сих пор я использовал эту систему для нескольких проектов и никогда не имел проблем, она также поддерживает другие видео платформы, но я использовал ее только с YouTube

Answer 2

Я знаю, что этот вопрос помечен JavaScript, но решение намного проще с CSS. Все, что вам нужно сделать, это обернуть видео, встроенное в div, и применить CSS.

<div class="videoWrapper">
<!-- Video embed goes here -->
</div>

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
}

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

Answer 3

Итак, вот решение, которое я придумаю с помощью JavaScript. Проблема, которую мы имеем здесь, состоит в том, что высота не может быть определена без знания ширины, и поскольку ширина является динамической c, нет способа жестко кодировать высоту.

Мы можем получить ширину элемента, используя JavaScript, с его помощью мы можем рассчитать высоту, используя соотношение сторон 16: 9 для стандартного видео. Конечно, вы можете изменить соотношение сторон на другое, но обычно видео YouTube имеет соотношение сторон 16: 9.

Этот код сделает IFRAME полной шириной в соответствии с его контейнером. Это означает, что если тело 100px, а контейнер 80px, если iframe находится в контейнере, ширина будет 80px. Из контейнера не выйдет и не испортит адаптивный дизайн.

Этот код будет изменять размер iframe при каждой загрузке или изменении размера страницы, гарантируя, что он всегда поддерживает формат 16: 9. соотношение сторон. Большинство людей могут использовать телефон, чтобы просмотреть его и убедиться, что его размер изменяется при перемещении телефона из вертикального в горизонтальное положение.

Вот как это сделать:

window.addEventListener("load", playerSizer);  /* Resize on load */
window.addEventListener("resize", playerSizer);  /* Resize on change in window size */

/* Resize function */
function playerSizer() {
  var player = document.getElementById("player");  /* Element ID */
  var width = player.offsetWidth;  /* Get width */
  player.style.height = (width * 0.5625) + "px";  /* Aspect ratio */
}

<center>
  <!-- Remember to change your YouTube URL -->
  <!-- Note width="100%", this will be used to calculate height -->
  <!-- Note id="player", this will be used by JavaScript function -->
  <iframe 
    id="player" 
    width="100%" 
    src="YOUR URL" 
    frameborder="0" 
    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" 
    allowfullscreen>
      Your browser does not support this, try viewing it on YouTube: YOUR URL
    </iframe>
</center>

Вот код, если вы не хотите отделять JavaScript от HTML:

<center>
  <iframe id="player" width="100%" src="YOUR URL" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>Your browser does not support this, try viewing it on YouTube: YOUR URL</iframe>
</center>
<script>
  window.addEventListener("load", playerSizer);
  window.addEventListener("resize", playerSizer);
  function playerSizer() {
    var player = document.getElementById("player");
    var width = player.offsetWidth;
    player.style.height = (width * 0.5625) + "px";
  }
</script>

Надеюсь, это поможет ?