你好,你可以从我附上的图片中看到。我设法创建了一个包含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
答案 0 :(得分:0)
我认为你以错误的方式解决这个问题。而不是试图设置iframe
的旋转,为什么不使用绝对定位来调整它的大小?
iframe {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
}
&#13;
<iframe src="http://www.example.com/">
&#13;
这样做会告诉浏览器只是让内容填满屏幕,而你不必处理轮换或其他任何事情。