1

я поставил чтобы видео было в блоке справа ширина блока eight 460 px

сделал чтобы видео растягиалось на весь блок

<div class="eight columns bottom-3">
            <iframe width="100%" height="315" src="https://www.youtube.com/embed/mb4nAm8ORSY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
       </div>

а получается таквведите сюда описание изображения

2 ответа 2

2

Ваш текущий код не адаптивен под мобильные телефоны и задает высоту в 0 пикселей там, где не нужно (что грозит ошибками в дальнейшем).

введите сюда описание изображения

Правильная вставка адаптивного виде с Youtube

в вашем случае нужно обернуть frame в ещё один div и применить к нему стили, а со своих колонок убрать .tube (везде) и добавить отступ сверху для main-container. Вот так:

<div class="eight columns bottom-3">
  <div class="youtube">
    <iframe width="100%" height="315" src="https://www.youtube.com/embed/mb4nAm8ORSY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
  </div>
</div>

И добавляете следующие стили

.main-content{
  margin-top: 25px;
}
.youtube{
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 0px;
    height: 0;
}
.youtube iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Результат в десктоп версии:

введите сюда описание изображения

Результат в мобильном:

введите сюда описание изображения

1

@Sevastopol вот что получилосьвведите сюда описание изображения

1

Ваш ответ

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

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