Player.js: Percentage values for width and height are not set correctly

[cookpete]

Expected Behavior

Passing in width and height options as 100% should set the iframe width and height attributes to 100%

Actual Behavior

The iframe width and height attributes are set to just 100, which is interpreted by browsers as 100px

Steps to Reproduce

new Vimeo.Player(90509568, {
  width: '100%',
  height: '100%'
})

Produces something like the following:

<iframe src="https://player.vimeo.com/video/90509568" width="100" height="100"></iframe>

[bdougherty]

This library uses oEmbed to get the embed code, so we would have to update it there. I'll discuss with our API team and I'll leave this open for now.

[bdougherty]

Actually, after reading over the oEmbed spec, it specifically states that width and height should be in pixels. Have you tried using the (experimental) responsive parameter? I think that should work for your use case.

[cookpete]

Have you tried using the (experimental) responsive parameter?

I have. It almost solves the problem, but not quite. What happens now is that the iframe fills the window width, but uses padding-top technique to fix the aspect ratio depending on the video:

Ideally what I need is to be able to explicitly set a 100% height, regardless of aspect ratio, so the iframe fills it's container:

[paulyeo21]

@CookPete Were you able to find a solution to your issue? If so, would you mind sharing? I am in a similar situation.

Also @bdougherty could you direct me to the documentation of the experimental responsive parameter you were referencing?

[ccampbell]

@paulyeo21 it is not documented right now, but it is adding responsive=1 to the oembed call. For example:

https://vimeo.com/api/oembed.json?url=https%3A//vimeo.com/76979871&responsive=1

If you are using this method to embed using the player js library:

https://github.com/vimeo/player.js/tree/5e2282f7856c39907c080132c500d21586438d34#automatically-with-html-attributes

Then you should be able to add data-vimeo-responsive="1" to your markup to get that work.

[paulyeo21]

Hi @ccampbell I've tried your suggestion and it seems like adding the div attribute blocks the iframe from loading. Here is the div with the "data-vimeo-responsive" attribute. Without the attribute the iframe loads as before. I am using the js api from https://player.vimeo.com/api/player.js.

Edit:

Edit:
On second look it looks like its not blocking the iframe, the iframe is just not visible for other reasons. Thanks @ccampbell !

[cookpete]

@paulyeo21 The closest I got was manually setting height: 100% on the generated inner iframe after a timeout, but that seems hacky. Ideally I need to be able to override the iframe's style as it is generated.

[cookpete]

Also it should be noted that responsive mode seems to break all player events and methods. I'm assuming this is something to do with the different markup structure?

[ccampbell]

@CookPete that should _definitely_ not be the case. The events shouldn't have anything to do with the page markup. Can you provide a jsfiddle where there is happening?

[jybleau]

hi @ccampbell, @CookPete, here it is http://jsfiddle.net/jybleau/7jrx3qwk/

Events are not working when _responsive_ property is _true_.

Thanks!

PS: FTR, as mentioned, a temporary workaround is to set the width and height afterward, like this:

  player.on('loaded', function() {
    var frame = container.querySelector('iframe')
    if (frame !== null) {
      frame.style.width = '100%'
      frame.style.height = '100%'
    }
  })

[ccampbell]

@jybleau thanks! I think this is a similar issue to #45

[bdougherty]

See #54 for the responsive embed code issue.

[jybleau]

Does work for me now with version 1.0.6. Thanks @bdougherty !
And BTW cool video!

[phpdev-expert]

player.on('loaded', function() {
var frame = $('#containerID iframe')[0];
if (frame !== null) {
  frame.style.width = '100%'

}

})

This working for me.. :)

[cookpete]

@rsichel107 why has this been closed? It's an old issue but still a problem as far I can see. The ideas posted (setting iframe height and width after the fact) seem like workarounds and not an actual solution.

[ahmadawais]

Well this works for me! Not sure why no one answered this:

const player = new Player( 'theVideo', {
    id: 59777392,
    responsive: true
});

[cookpete]

@ahmadawais see my comment above. The responsive parameter does not solve the problem that this issue is trying to address.

[ahmadawais]

OK That's not a problem for me coz all my videos are of the same aspect ratio and size.