Question

我正在制作android webview应用程序，我需要在完整的html页面上显示来自youtube的垂直视频（视频为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%; }
}

科尔多瓦调整内容大小

1 个答案: