如何输出宽度 =“100%”或宽度 =“”的 iframe。不是，宽度 = "100"答案

【问题标题】：How do I output an iframe with width = "100%" or width = "". Not, width = "100"如何输出宽度 =“100%”或宽度 =“”的 iframe。不是，宽度 = "100"
【发布时间】：2013-06-24 23:44:45
【问题描述】：

我正在使用 vimeowrap 循环播放视频列表。我希望 vimeowrap 输出的 iframe 的宽度和高度为“100%”或“”什么都没有。任何一个都可以。

Vimeo 包装：http://luwes.co/labs/vimeo-wrap/

我的测试页面：http://www.a3network.com/vimeo_wrap.html

这是我正在测试的内容。

<script>
    vimeowrap('player').setup({        
        urls: [
            'https://vimeo.com/16437160',
            'https://vimeo.com/16439781',
            'https://vimeo.com/16449483',
            'https://vimeo.com/16449643',
            'https://vimeo.com/16449980',
            'https://vimeo.com/16450347'
        ],
        width: '100%',
        height: '100%'
    });
</script>

我得到这个输出：

<iframe width="100" height="100" frameborder="0" allowfullscreen="" mozallowfullscreen="" webkitallowfullscreen="" src="http://player.vimeo.com/video/16437160?api=1&amp;player_id=player_0" id="player_0" style="position: absolute; display: block;"></iframe>

我需要这个输出：

<iframe width="100%" height="100%" frameborder="0" allowfullscreen="" mozallowfullscreen="" webkitallowfullscreen="" src="http://player.vimeo.com/video/16437160?api=1&amp;player_id=player_0" id="player_0" style="position: absolute; display: block;"></iframe>

非常欢迎并非常感谢任何帮助、建议、线索、线索、提示。

【问题讨论】：

看起来 VimeoWrap 可能只接受宽度和高度的像素值。这可能会有所帮助：Fluid and responsive YouTube and Vimeo videos with fluidvids.js

标签： javascript html json vimeo

【解决方案1】：

vimeowrap 似乎不支持设置百分比高度/宽度。您可以在添加框架后简单地更改框架上的样式，例如（使用 JQuery）：

vimeowrap('player').setup({        
    urls: [
        'https://vimeo.com/16437160',
        ...
    ]
});
$("#player").find(":iframe").css("width", "100%").css("height", "100%");

你也可以看看我曾经尝试过的fiddle。

【讨论】：

【解决方案2】：

您可以将处理程序添加到 playlist 和 playerReady 事件，然后将 div 和 iframe 的大小调整为 100%：

var player = vimeowrap('player').setup({
   ...
});

player.events.playlist.add(function() {
    player.container.style.height = '100%';
    player.container.style.width  = '100%';
    player.display.style.width    = '100%';
    player.display.style.height   = '100%';
});

player.events.playerReady.add(function() {
    player.iframe.width  = '100%';
    player.iframe.height = '100%';
});

演示：http://jsfiddle.net/C5UTC/

【讨论】：