Как увеличить размер видео в html без потери хороших свойств, таких как отзывчивость и центрирование? - PullRequest
Новая
       19

Как увеличить размер видео в html без потери хороших свойств, таких как отзывчивость и центрирование?

0 голосов
/ 20 апреля 2020

Мне нужно разместить видео YouTube на моем сайте.

Я могу сделать это и сделать его адаптивным и центрированным с помощью следующего кода. 

.iframe-container{
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 40px;
}
.iframe-container iframe{
  max-height: 315px;
  max-width: 560px;
}
<div class="iframe-container">
    <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/XJNlK8n_rTU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

Это хорошо работает, выглядит красиво и отзывчиво.

Однако видео выглядит немного маленьким, поэтому я хотел бы сделать его немного больше, при этом сохраняя правильное соотношение сторон 16:9.

Я пытался изменить ширину и высоту iframe, а также максимальную высоту и максимальную ширину в .iframe-container iframe, например итак:

Обновлено 

.iframe-container{
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 40px;
}
.iframe-container iframe{
  max-height: 600px;
  max-width: 1067px;
}
<div class="iframe-container">
    <iframe width="1067" height="600" src="https://www.youtube-nocookie.com/embed/XJNlK8n_rTU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

И это сделало его больше, но потом оно потеряло способность реагировать, и я не уверен, почему?

Может кто-нибудь объяснить, как изменить размер и не потерять отзывчивость.

У меня нет фиксированного размера c, поэтому, если есть лучший способ сделать это, скажем, занимают 60% ширины экрана, и высота будет такой, какой она должна быть для поддержания 16:9 это также помогает мне!

Спасибо.

...