Question

你好，你可以从我附上的图片中看到。我设法创建了一个包含iframe视频的网页。当检测到纵向方向时，它会在移动设备上旋转，因此视频始终以横向方式播放。我现在有这个工作但是我的问题是当移动设备以横向模式保持时，视频是全屏的并且可以正常工作，如下图所示。

MOBILE DEVICE HELD IN LANDSCAPE

当设备处于纵向模式时，（正常）视频会旋转到它的侧面，但它应该不会填满屏幕。显示此图像可在下面找到。

MOBILE DEVICE HELD IN PORTRAIT

我需要做的就是当设备以纵向方式保持时，让视频填满屏幕，就像横向拍摄一样。

我的代码如下：

CSS

<style>
* {
height: 100%; width: 100%; top: -20px; left: 0px;
}

@media (orientation: portrait) {
body {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
}
</style>

HTML

<body>
       <div><iframe src="//fast.wistia.net/embed/iframe/qnca9gdlv5?videoFoam=true" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" allowfullscreen mozallowfullscreen webkitallowfullscreen oallowfullscreen msallowfullscreen width="100%" height="100%"></iframe></div><script src="//fast.wistia.net/assets/external/E-v1.js"></script>
    </div>
</body>

ALSO HERE IS A LIVELINK TO THE OFFENDING PAGE SO YOU CAN VIEW THE SOURCE YOURSELF

Answer 1

我认为你以错误的方式解决这个问题。而不是试图设置iframe的旋转，为什么不使用绝对定位来调整它的大小？

＆＃13;

iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

＆＃13;

<iframe src="http://www.example.com/">

＆＃13;

这样做会告诉浏览器只是让内容填满屏幕，而你不必处理轮换或其他任何事情。

在移动设备上制作iframe填充屏幕

1 个答案: