Как сделать адаптивное видео YouTube на сайте

Проблема со вставкой видео YouTube заключается в том, что они являются iframe (фреймами). Iframe должны иметь точную высоту и ширину, иначе они будут выглядеть странно.

Нам нужно сохранить пропорции, исходя из соотношения сторон видео.

Чтобы видео YouTube отображалось на вашей странице адаптивно, сначала оберните его в контейнер div:

<div class="video-container">
  <iframe src="https://www.youtube.com/embed/klZNNUz4wPQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

Затем добавьте CSS на свой сайт:

.video-container {
    overflow: hidden;
    position: relative;
    width:100%;
}

.video-container::after {
    padding-top: 56.25%;
    display: block;
    content: '';
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Смотрите, что за магическое число 56.25%? Оно необходимо в качестве отступа, когда соотношение сторон видео составляет 16: 9. (9 составляет 56,25% от 16).

Если ваше видео, например, 4: 3, установите его на 75%.

Читайте также

Комментарии ()

    Написать комментарий