如何输出宽度=“ 100％”或宽度=“”的iframe。 不，宽度=“ 100”

Question

I am using vimeowrap to loop through a playlist of videos. I want the iframe that vimeowrap outputs to have a width and height of "100%" or "" nothing. Either will work.

Vimeo Wrap : http://luwes.co/labs/vimeo-wrap/

My Test Page: http://www.a3network.com/vimeo_wrap.html

Here is what I am testing.

<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>

I'm getting this output:

<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>

I need this output:

<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>

Any help, suggestions, clues, leads, hints are all very welcome and greatly appreciated.

Answer 1

It seems that vimeowrap doesn't support setting percentage heights/widths. You could simply change the style on the frame after it is added, for example (using JQuery):

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

You can also look at the fiddle I used to try this out.

Answer 2

You could add a handler to the playlist and playerReady events and then resize the divs and iframe to be 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%';
});

Demo: http://jsfiddle.net/C5UTC/