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

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

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

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

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

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

javascript html iframe youtube

Всего 3 ответа

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

Мы можем получить ширину элемента, используя 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>

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

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

Короче говоря, код будет выглядеть так: не забудьте загрузить fitVidJs на свою страницу

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

Я знаю, что этот вопрос помечен с помощью 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%;
}