Сделайте вставку видео на YouTube адаптивной

Question 1

У меня есть несколько видеороликов, встроенных на мою веб-страницу с 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

html css twitter-bootstrap iframe bootstrap-5

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

Answer

Вы можете попробовать установить 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

Question 2

Вы можете попробовать установить 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

Сделайте вставку видео на YouTube адаптивной

1 ответ

Похожие вопросы

Новые вопросы

html