Почему видео из ютуба не растягивается по ширине блока?

Видео из YouTube не растягивается по ширине блока, потому что у него есть фиксированная ширина, заданная в коде встроенного плеера. Это помогает в поддержке соотношения сторон и предотвращает искажение изображения.

Однако, вам есть несколько вариантов, которые позволят вам растянуть видео по ширине блока:

1. CSS-правило object-fit: cover: данное правило позволяет растягивать видео на всю ширину блока, сохраняя пропорции. Однако, оно не работает в старых версиях Internet Explorer.

.video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

2. Использование внешних библиотек, таких как Fitvids.js: данная библиотека автоматически адаптирует видео к размерам родительского контейнера. Вы можете подключить ее к вашему проекту и применить необходимые классы к ваши видео.

<div class="video-container">
  <iframe src="https://www.youtube.com/embed/your-video-id" frameborder="0" allowfullscreen></iframe>
</div>

$(document).ready(function(){
  $(".video-container").fitVids();
});

3. Использование CSS свойства width: 100%; height: auto;: вы можете задать ширину видео в процентах и оставить высоту автоматической. Это необходимо для поддержки соотношения сторон видео.

.video {
  width: 100%;
  height: auto;
}

Отметим, что эти решения могут немного отличаться, в зависимости от конкретной структуры вашего кода и используемых технологий.