VC columns no longer lined up, video element much lower than adjacent element

[AndyDaupert]

My client contacted me today, they have a site with three different pages where there are two VC columns, one with a heading and text, the other with a Video Player element. Every one has a large space above and below the Video Player, about 230 px. On two of the three, using Inspector in Chrome, I see an iframe surrounding the element. On the third it’s not an iframe, but still shows space above and below the Video Player element. I checked the theme, it is 7.0.4, I’m assuming it auto updated, but don’t know if that could have caused this.

Any help/thoughts?

[friech]

Hi @AndyDaupert,

Thank you for writing in, your pages are created in Visual Composer where X is integrated, but your Visual Composer’s integration is currently off. Please enable it in Admin > WPBakery Page Builder > General Settings > Legacy X Integration.

Hope this helps,
Cheers!

[AndyDaupert]

Thank you for your response. I checked the X Integration setting and it was enabled. I double checked by un-checking, then re-checking the box, and reviewing the page, there was no change in the position of the video player.

[AndyDaupert]

There appears to be a CSS selector .vp-center which uses flexbox to align center. Is this something that was added in the updated X?

[rad]

Hi Andy,

The .vp-center isn’t a cornerstone or X selector. But the reason for that issue is because you added your video embed code within X’s responsive video, and then added within VC’s responsive element. You shouldn’t use them at the same time, you’ll have to choose.

Please try adding the video embed to your VC embed element without X’s embed shortcode. I can’t also directly check it since your site has different login URL than Wordpress’ builtin. Please provide the correct login URL as well.

Thanks!

[AndyDaupert]

Very sorry, I forget that the URL was not the default. I’ll add a secure note with login.

[ruenel]

Hello @AndyDaupert,

Thanks for writing in!

To get your issue resolved, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.wpb_video_widget .x-resp-embed {
    padding-bottom: 0;
}

Feel free to adjust top margin in your Video Player Settings element to add some space at the top of the video.

Hope this helps. Kindly let us know.

[AndyDaupert]

That worked, thanks so much!

[ruenel]

You are most welcome!