У меня есть несколько видеороликов, встроенных на мою веб-страницу с YouTube. Дело в том, что я использую приведенный ниже код, чтобы сделать его отзывчивым (через начальную загрузку). Это хорошо на мобильных устройствах и планшетах, но на настольных компьютерах и ноутбуках оно становится очень большим. Когда я не смог решить проблему, я не использовал вставку YouTube и переключился на тег видео HTML5. В этом случае проблема с отзывчивостью была решена с помощью ширины: 100% и автоматической высоты, но видео не загружалось и продолжало буферизоваться. Итак, я снова переключился на вставку YouTube, чтобы хоть видео загружалось, но не очень отзывчиво (не на ноутбуках, на настольных компьютерах). Также прикрепите ссылку на веб-страницу, на которой размещены видео.

Код-

<div class="container">
  <div class="ratio ratio-16x9">
    <iframe src="https://www.youtube.com/embed/kq7CdSf7ocA?rel=0" title="YouTube video 
      player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; 
      encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>
</div>

Ссылка-

https://www.simplystraight.in/videos.html

https://www.simplystraight.in/ions-and-their-types-with-examples-video.html

https://www.simplystraight.in/chemical-bonding-video.html

1
YADAV MAHIR 26 Янв 2022 в 16:13
Какая версия Bootstrap?
 – 
カメロン
26 Янв 2022 в 16:21
Я использую версию бутстрапа 5.0.1.
 – 
YADAV MAHIR
26 Янв 2022 в 16:23
Насколько большим вы хотите его на рабочем столе?
 – 
カメロン
26 Янв 2022 в 16:24
Его ширина должна быть ок. 900 и высота авто.
 – 
YADAV MAHIR
26 Янв 2022 в 16:25

1 ответ

Лучший ответ

Вы можете попробовать установить max-width в iframe.

-- Видео не загружается во фрагменте... Fiddle

.container {
  display: flex;
  justify-content: center;
}

iframe {
  max-width: 900px;
  max-height: 400px;
}
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>

<div class="container">
  <div class="ratio ratio-16x9">
     <iframe src="https://www.youtube.com/embed/kq7CdSf7ocA?rel=0" title="YouTube video 
      player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; 
      encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>
 </div>
1
カメロン 26 Янв 2022 в 16:40
Спасибо большое за вашу помощь. Я хотел бы спросить вас, можно ли также регулировать высоту?
 – 
YADAV MAHIR
26 Янв 2022 в 16:37
Да, поскольку высота не задана, используется height: 100%; из ratio. Таким образом, он отображает высоту 900 пикселей или, как вы сказали, height: auto;. Посмотрите настройки, я сделал так, чтобы максимальная высота была 400 пикселей. (разрезать пополам).
 – 
カメロン
26 Янв 2022 в 16:41
Спасибо большое за вашу помощь. Проблема была решена.
 – 
YADAV MAHIR
26 Янв 2022 в 16:43
Нет проблем ~ см. эту статью о что делать, если на мой вопрос ответили
 – 
カメロン
26 Янв 2022 в 16:45