Video Player showing black band on top and bottom

This thread is resolved. Here is a description of the problem and solution.

Problem:

The custom video field displays with wrong size in frontend.
[types field='video' width="600" separator=', '][/types]

Solution:

It seems to be a compatibility problem in your website, I have checked the HTML source code you mentioned above:
view-source:https://formatout.fpdevel.ca/conferencier/alain-samson/, line 222:

<video class="wp-video-shortcode" id="video-69-1" width="600" height="320" ... </video>

Types shortcode is outputting the video field into a HTML tag

https://cdn.toolset.com/wp-content/uploads/2018/05/886832-height.JPG

please try this:

Deactivate other plugins and switch to wordpress default theme, and test again

Relevant Documentation:

This support ticket is created 6 years, 6 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
-	9:00 – 13:00	9:00 – 13:00	9:00 – 13:00	9:00 – 13:00	9:00 – 13:00	-
-	14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	-

Supporter timezone: Asia/Hong_Kong (GMT+08:00)

Tagged: Front-end display, Layouts plugin

This topic contains 2 replies, has 2 voices.

Last updated by francoisP-5 6 years, 6 months ago.

Assisted by: Luo Yang.

Author

Posts

May 14, 2018 at 7:55 pm #885472

francoisP-5

I have uploaded a video file (1280 x 720 aspect ratio 16:9) using a video field in my CPT conferencier.
In my layout page the value to show the video field is as follow: <div>[types field='video' width="600" separator=', '][/types]</div>
When I look at it in the front end this is what I see: hidden link
You will see that there is a black band on top and bottom. It's like it's not understanding that I want the video player to display not more than 600 px wide and ajusting the height accordingly.

Does that ring a bell with you guys? Tx agin for any help you can give me.
If ever you need access to the site, I will be happy to create an admin account for you. : )
François : )

May 15, 2018 at 4:34 am #886832

Luo Yang

Hello,

It seems to be a compatibility problem in your website, I have checked the HTML source code you mentioned above:
view-source:hidden link, line 222:

<video class="wp-video-shortcode" id="video-69-1" width="600" height="320" ... </video>

Types shortcode is outputting the video field into a HTML tag <video> with 320 px height, but there are some JS codes in your website which is change the veido height to 641.656px, see screenshot height.JPG

please try this:
deactivate other plugins and switch to wordpress default theme, and test again

May 15, 2018 at 11:50 pm #890971

francoisP-5

I did that but no change. Seems like some JS code somewhere is overwriting or adding to that tag, I know that Toolset is not invoilve so, I'll try to find the find the little bugger and let you know about my finding. Tx. : )