Question

我的网页包含iframe。内部iframe是嵌入式Youtube视频。当我播放这个视频时，我会让它按比例放大（增长）。随着视频的增长，并非所有视频都可见，因为iframe不够宽。

是否可以使iframe'溢出其内容'，即使视频在iframe宽度之外可见（请参阅下面的屏幕截图，以获得我想要实现的明确示例）。

这就是网页目前的样子： enter image description here

这就是我想让视频在完全成长时的外观： enter image description here

注意我不能让iframe更宽。我试过给iframe（以及它的所有子元素）CSS overflow: visible，但它不会改变任何东西。

这是一个如何安排网页的简单示例：

....head, opening html tag, etc. up here
<body>
  <div id="outerContainer" style="overflow: visible">
     <div id="navBar">...</div>
     <div id="content style="overflow: visible">
        <iframe src="myHelpDocumentation.html" style="overflow: visible">

           <!-- Inside this iframe/webpage are the embedded Youtube videos.
                Each video is an iframe itself (that sits inside a div). -->

        </iframe>
     </div>
  </div>
</body>

您是否知道使用CSS或HTML在iframe范围之外显示视频的方式？我可能会使用Javascript从iframe中删除视频（iframe）并将其放在主屏幕中网页但这会是非常糟糕的网站设计你不觉得吗？

Answer 1

不，这是不可能的......

来自iframe的文档是另一个文档，浏览器安全性不允许您这样做...

修改：您可以使用透明背景颜色的fullscreen属性作为容器，并将嵌入的视频放在那里。

this answer中描述了全屏代码。

Answer 2

[已更新并已编辑]

window.open适用于IE（{em>和window.open('iframe.html','','fullscreen=1,channelmode=1');一样，但我想为IE 找到一个正确的方法，这样它就不会重新加载内容我为其他人做了）但我发现你有更好的方法适用于chrome，safari和FF，因为它们不支持影院模式，

你的iframe应该像：

<iframe src="iframe.html" allowFullScreen></iframe>

这是您的iframe的内容页面：

<html>
<head>
<title></title>
<style type="text/css">
.fullScreen{
    width:100%;
    height:100%;
}
.minScreen{
    width:auto;
    height: auto;
}
</style>
<script type="text/javascript" src="jquery-1.10.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
        var element = document.getElementById('container');
        var maxed = false;
        $('#max').click(function(){
            if(maxed){
                if (document.mozCancelFullScreen) {
                    document.mozCancelFullScreen(); 
                    element.className = "minScreen";
                    maxed = false;
                } else if (document.webkitCancelFullScreen) {
                    document.webkitCancelFullScreen();
                    element.className = "minScreen";
                    maxed = false;
                }
            }else{
                if (element.mozRequestFullScreen) {
                    element.mozRequestFullScreen();
                    element.className = "fullScreen";
                    maxed = true;
                } else if (element.webkitRequestFullScreen) {
                    element.webkitRequestFullScreen();
                    element.className = "fullScreen";
                    maxed = true;
                }
            }
        });
    });
</script>
</head>
<body>
<div id="container">
    <button id="max">click to maximize/minimize</button>
</div>
</body>
</html>

你可以使用css来提供容器高度和宽度，在最大化或最小化/关闭时使用类（addClass和removeClass）（样式添加到代码中）

IE兼容功能即将推出..

编辑：如果您不想使用Windows或全屏，也许应该从另一个角度看问题。

解决方案是丢弃iframe ，这会限制辅助功能，将其替换为具有css overflow:hidden的div ，然后使用您的div填充此div iframe页面的内容（您可以使用ajax或任何其他方法加载内容）。 tada，你有像iframe这样的东西，但它是同一个文件的一个元素。然后，您可以通过两种方式控制溢出：

在overflow:hidden和visible或auto之间切换容器的css。

2-将元素重新定位到容器div之外，并使用绝对定位将其显示在其他元素上。

注意：不要害怕丢失滚动条，您可以构建自己的滚动条，或者只使用jquery ui滑块的值链接内容的 top css 绝对内容的定位，你很高兴。

Answer 3

此处未建议的另一种方法是使用两个iframe。第二个会漂浮在第一个上，并包含视频。您可以使用window.postMessage在窗口之间进行通信。但是，如果您可以控制iframe和首页，那么您可以将视频放在首页div中。这两个页面仍然可以与window.postMessage进行通信。

使iframe内容溢出iframe范围

3 个答案: