Video not centered on element

[premitheme]

Hi there,

I was using v3.0.20 and have an element with YT background applied on it, and this was the result as expected...

Then when I updated to v3.2.1 the video is not centered vertically...

As you can see it's shown correctly in the first screenshot, but its covered in the second one (notice the word "Copenhagen" which is centered vertically in the video).

I only swapped the minified js file, nothing else touched. Not sure what I'm doing wrong, any advice will be appreciated.

[pupunzi]

Hi, do you have an URL where I can see your issue? I'm suggesting to replace also the CSS file but surely this is not the problem.

If I can see the page where you're having the issue I probably can find what is wrong.

All the best, Matteo

[premitheme]

Thanks for your response,

Here is the link to demonstration of the issue.

I was not using the CSS file before with the old version, but to make sure I tested the CSS file with new version and it doesn't make any difference.

I was skeptical about FitVids plugin being the issue, but removing it makes no difference as well.

Another thing I have found, when I initially load the page at certain window width, 1000px for example, then I resize the window to smaller width, say 500px, and I resize it back to bigger width like 1200px, the video background will not go bigger than the initial width (1000px) and will leave me at the final width (1200px) with 200px of black area. Here is a screenshot of the final result.

Looks like something preventing the plugin from resizing and centering correctly, but it's strange because this happen when I only update the plugin, nothing else is changed.

[pupunzi]

Hi, You should not set the containment as "self" other then if you want to render a chrome-less player. Just create a DIV element with all the YTPlayer properties and the DIV element where the player should play and set the containment as follow:

<div class="class="pt-bg-mask pt-intro-bg"></div>

<div id="ytp-properties" data-property="{videoURL:'https://www.youtube.com/watch?v=gKDDUbPLnqM', containment:'.pt-bg-mask pt-intro-bg', ratio:'auto', autoPlay:true, mute:true, showControls:false, showYTLogo:false, stopMovieOnBlur:false, startAt:0, opacity:1}"></div>

In your javascript initialize the YTPlayer on the DIV element that contains the properties:

    jQuery(function () {
          jQuery("#ytp-properties").YTPlayer();
   });

This will fix your problem.

[premitheme]

Thanks a lot, this fixed my issue.