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

时间:2015-03-25 19:32:46

标签: html css css3 mobile screen-orientation

你好,你可以从我附上的图片中看到。我设法创建了一个包含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

1 个答案:

答案 0 :(得分:0)

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

&#13;
&#13;
iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
&#13;
<iframe src="http://www.example.com/">
&#13;
&#13;
&#13;

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