Как просмотреть отзывчивый iframe как на мобильном устройстве, так и на компьютере

Question

Я применил ниже css в iframe для отзывчивого просмотра. Он отлично работает в браузере рабочего стола, но когда я просматриваю в мобильном браузере, iframe отображается как половина экрана. Пожалуйста, проверьте код ниже и посоветуйте, как это сделать ...

CSS: -

.iframe-container {
  overflow: hidden;
  padding-top: 56.25%;
  position: relative;
}

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

/* 4x3 Aspect Ratio */
.iframe-container-4x3 {
  padding-top: 75%;
}

HTML: -

<div class="iframe-container">
  <iframe src="//www.youtube.com/embed/KMYrIi_Mt8A" allowfullscreen></iframe>
</div>

Answer 1

если вы говорите о чем-то вроде изображения ниже для мобильных устройств, то это нормальное поведение, поскольку изображение / видео подстраивается под свое соотношение сторон

, но если вы хотите иметь видео в полную высоту, обратитесь к приведенному ниже коду

<div>
<iframe src="//www.youtube.com/embed/KMYrIi_Mt8A" allowfullscreen></iframe>
</div>

<br>
<br>
<br>
fdfd 

div {
    position: relative;
    height: 100vh;
}

iframe {
    width: 100%;
    height: 100%;
    border: none;
    margin: 0;
    padding: 0;
}

https://jsfiddle.net/ytvmLu3w/