Кордова меняет содержание

Question

Я делаю Android-приложение для просмотра веб-страниц, и мне нужно отобразить вертикальное видео с YouTube на полной HTML-странице (видео размером 360x640). Например, мой телефон 9:16 (720x1280). Я хотел бы получить это: IMG

Так что видео будет обрезано, но уместно, но теперь я получаю следующее: IMG

Для этого я попытался использовать это: <meta name="viewport" content="width=360,height=640, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> Это также может быть проблемой с видео iframe. Мой текущий код: HTML:

<div class="video-background">
<div class="video-foreground">
  <div id=player></div>
</div>

CSS:

body, html {
   height: 100%;
   margin: 0;
}
html {
   min-width: 100%;
   min-height: 100%;
}
.video-background {
  background: #000;
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -99;
}
.video-foreground {
  width: 360px;
  height: 640px;
}
.video-foreground,
.video-background iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

Я рассчитываю на вашу помощь. Извините за мой плохой английский.

Answer 1

Решение довольно простое. Добавьте это в CSS:

@media (min-aspect-ratio: 9/16) {
  .video-foreground { height: 300%; top: -100%; }
}
@media (max-aspect-ratio: 9/16) {
  .video-foreground { width: 300%; left: -100%; }
}