iframe 如何填充fancybox答案

【问题标题】：How can an iframe fill a fancyboxiframe 如何填充fancybox
【发布时间】：2017-05-15 16:06:56
【问题描述】：

我已经设置了一个精美的盒子 (http://fancybox.net)。它的框大小会自动调整为网络浏览器的大小。

现在我想在盒子里放一个 iframe 来随盒子一起调整自己的大小。

我搜索了响应式 iframe，但示例显示了与浏览器窗口相关的响应式 iframe。

我所追求的是一种允许 iframe 自行调整到框的解决方案。

This is a simple link that is fired with jquery:
<body>
<a  class="Link"  file="game" srrc="video/voytox/index.html" 
caption="Caption" ></a>

and it opens an iframe within the fancybox

<iframe id ="Player"   ></iframe>
</body>

this is the jquery:
$('.Link').click(function(){
        var File = $(this).attr('file');
        var srrc = $(this).attr('srrc');
        //var videoWidth = Number($(this).attr('videowidth')); I can 
         optionally set fixed height and width, but i don't want to do that.
        //var videoHeight = Number($(this).attr('videoheight'));



        $('#Player').attr("src", srrc); //this refers to the iframe

这会触发fancybox。我将它设置为固定的宽度和高度以用于测试目的，即检查 iframe 如何填充fancybox。不幸的是，100%，它超出了花哨的盒子，并且不包含在内。我希望它是“从属” 到盒子的大小。

        $.fancybox({
            'autoDimensions'    : false,
            'scrolling'         : 'no',
            'width'             : '800',
            'height'            : '800',
            'hideOnOverlayClick' : false,
            'transitionIn' :'fade',
            'transitionOut' :'fade',
            'overlayColor' :  '#666',
            'overlayOpacity': .9,
            'href' : '#videoPlayer'

             });

【问题讨论】：

您可以发布您的代码以及您已经尝试过的内容吗？我认为将 iframe 的宽度和高度设置为 100% 不适合您？
100% 让它超出盒子大小，我希望它包含在盒子里。

标签： javascript jquery html css iframe

【解决方案1】：

您需要将iframe 附加到您的fancybox - 这样，当您分配100% 的宽度时，它将相对于其父元素。目前他们是兄弟姐妹。

【讨论】：

似乎没关系，我也做了 html() 并传递了宽度为 100% 和高度为“100%”的 iframe。只有宽度被应用于盒子的全宽，高度根本没有。但是，当我将不同的值（如 50、80 等）硬编码到高度时，高度确实发生了变化。因此，我仍然不知道如何用 iframe 填充花哨的框。
我需要做的是将 iframe 高度设置为框的高度。如何做到这一点？