花式盒子中的 iframe

Posted 2023-05-09

【中文标题】花式盒子中的 iframe

【英文标题】：Iframe in a fancybox

【发布时间】：2013-12-15 19:45:17

【问题描述】：

我很难将 Iframed 视频实现到花式盒子中。

这是我的代码：

<a href="#movie-wrapper" class="showmovie fancybox">
 <div id="movie-wrapper">
   <iframe id="movie"   src="<?=$this->getElement("contextPath");?>/movie/<?= $this->getElement("movieId"); ?>/iframe"></iframe>
 </div>
</a>

我在 iframe 周围放了一个 div，因为视频开始出现问题，但现在，它只有在单击几次后才会打开，如果打开，非 iframe 视频就会消失。

谁能帮帮我？

【参考方案1】：

不如这样做呢？

<a href="<?=$this->getElement("contextPath");?>/movie/<?= $this->getElement("movieId"); ?>/iframe" class="showmovie fancybox">open video</a>

和脚本

$(".fancybox").fancybox(
    type: "iframe",
    width: "80%", // or whatever
    height: "80%"
);

我个人不喜欢内联 iframe，因为您会在页面加载中增加一些开销。

另一方面，我对您的问题的猜测是您使用的是 fancybox v1.3.4。如果是这样，在使用内联 iframe 时会出现一个已知问题，您可以在此处阅读更多相关信息：

https://groups.google.com/forum/#!topic/fancybox/1zIbmk31sgs

它还包括我在 2011 年 6 月提出的解决方法，以防您真的想在该版本的 fancybox 中坚持使用内联 iframe。

顺便说一句，如果在fancybox v1.3.4 中使用内联内容，您必须注意这个其他错误和解决方法https://groups.google.com/forum/#!topic/fancybox/-re22BoXOzM