Question

我已经设置了一个精美的盒子（http://fancybox.net）。它的盒子大小会根据webbroser的大小自动调整大小。

现在我希望盒子里面有一个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'

             });

Answer 1

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

iframe如何填充fancybox

1 个答案: