Player.js: CSS Class vp-player-layout Issue

[chrisbo]

Expected Behavior

No left margin

Actual Behavior

1px left margin

Steps to Reproduce

View full body width video

Example

https://www.figtreehotel.com.au/

Cause

left: 1px
<div class="vp-player-layout" style="left: 1px; top: 0px; width: 1902px; height: 1070px;">

Fix

left: 0
<div class="vp-player-layout" style="left: 0; top: 0px; width: 1902px; height: 1070px;">

Note

Doing a Google, I found this has been an issue for a long time, and the consensus is that you will do nothing about it

[fisherinnovation]

Thanks for logging this @chrisbo - Upon initial tests of your report I noticed that resizing the browser can correct this 1px offset, can you replicate and see that as well? Looks to be related to a sizing/rounding related issue when attempting to keep the video aspect ratio in various browser dimentions. I will continue to dig..

[chrisbo]

@fisherinnovation - I can confirm the same behaviour in the latest version of Chrome, Firefox and Tor and yes, it does appear to be a rounding issue, although, the 1px seems pointless and there was no issue when experimenting using maxwidth, maxheight using the following script - however, no good for responsive behaviour.

https://github.com/vimeo/player.js#create-with-a-video-id-or-url

[speir-wang]

@chrisbo Hi, may I ask how do you control the style of the class vp-player-layout? My issue is the class vp-player-layout doesn't take up the whole parent div. I saw your website and you made it perfectly fit into the whole parent div. Did you add custom CSS or it just worked it out by the player itself? Thanks.

[chrisbo]

@speir-wang - Apart from the settings for the video done in my account at Vimeo, I am using Bootstrap for the responsive layout - https://getbootstrap.com/docs/4.1/utilities/embed/ and the following code on the page.

<div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" src="https://player.vimeo.com/video/276714763" allowfullscreen></iframe>
</div>

You can also do this with vanilla JS e.g. https://github.com/vimeo/player.js#create-with-a-video-id-or-url but IMO more work if you are already using Bootstrap.

Note. From what I recall, you have to remove the width: 640 option and use the seemingly undocumented responsive: true option.

[speir-wang]

Thanks for the replay, I am only using a flexbox grid layout CSS framework, so probably your solution won't work properly for me. I will try the vanilla JS solution and thanks for the note. Cheers!

[luwes]

If you're adding a responsive wrapper around the Vimeo iframe I recommend turning off our internal player responsive behavior by adding the transparent=0 param.

e.g. https://player.vimeo.com/video/24880291?transparent=0

[chrisbo]

@luwes - Thank you. Your solution worked!

[blimkemann]

@luwes, may I suggest that you document this option more accurately? After reading your description of it on your docs, I still had no idea this is what its real use is.

[haleyDesignhouse]

This issue seems to be back. I tried adding the transparent=0 and it won't remove it for me.

<div id="circular-video" class="hero-video" data-vimeo-url="https://vimeo.com/393050749" data-vimeo-autoplay="true" data-vimeo-loop="true" data-vimeo-controls="false" data-vimeo-muted="true" data-vimeo-background="true" data-vimeo-transparent="false"></div>

(function($) {
  'use strict';

  var videoPlayer = new Vimeo.Player('circular-video');
}(jQuery));