14

我有一个包含iframe. 里面iframe是嵌入的 Youtube 视频。当我播放这个视频时，我会放大（扩大）它的大小。随着视频的增长，并非所有视频都可见，因为 iframe 不够宽。

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

这是网页当前的外观： 在此处输入图像描述

这就是我想让视频完全成长后的样子： 在此处输入图像描述

注意我不能让 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）并将其放置在主网页中，但您认为这将是非常糟糕的网站设计吗？

4

3 回答 3

8

不，这不可能……

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

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

这个答案中描述了全屏代码。

于 2013-07-02T08:27:16.150 回答
3

[更新和编辑]

window.open 适用于 IE （如，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>

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

IE兼容功能在路上..

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

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

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

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

注意：不要害怕丢失滚动条，您可以构建自己的内容，或者只是将内容的顶部css 与 jquery ui 滑块的值与绝对内容的定位链接，您就可以开始了。

于 2013-07-02T06:33:44.013 回答
1

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

于 2015-11-10T21:10:43.193 回答