Video section on frontpage with big black gaps

Shapely
1

Hello, I hope you can help me: I embedded a YouTube Video (1920x734) into my homepage video section. Unfortunetly there are about 50 pixels of black above and under the Video. In the mobile Version those black gaps are larger than the video itself. Full Hight is off (no change when on), no numer set for video height. When I set the hight for 734 it just cuts the lower part of the video and still shows the black gap above. Using a full HD Video, the black gap ony apears on the mobile version. What can I do?

2

Hello there,

I hope you are doing well today.

Could you please provide a link to your website so that I can inspect it?

Best Regards,
Support

3

There it is: http://framework-film.de/

4

Hi,

Make sure the aspect ratio of the video is correct, could you share the YouTube video you’re using as embed so that we can check what is going wrong.

Let us know,

Thanks,
laranz.

5

The Video is made in 21:9 (no letterbox, 1920x817 (or so)) That could explain the small black gap above, but why does the mobile version show a gap bigger than the acual video above and under the Video?

6

Hello there,

The mobile version will resize the video for the device that it is being displayed on.

Best Regards,
Support

7

Hi,

Can you try a 16:9 video, and update us the status?

Let us know,

Thanks,
laranz.

8

When I use a 16:9 Video, in the Desktop-Version the gap is gone (no Problem, so I can use an other video). But on the mobile and tablet Version the gap still exists. I know that the mobile version will resize the video for the device that it is being displayed on, but why is this black section there? I unchecked “Full Hight” in the Widget, but the hight seems not to change, when I make the window smaller. The Video resizes, and the black area appears. Is there anything I can do to make that section disappear?

9

Hi,

For now, I am reporting this bug the developers. It will be fixed in the next version.

We can remove that in the mobile, use this Custom CSS in Appearance -> Customize -> Additional CSS

@media only screen 
  and (max-width: 480px) {
.video-widget {
    display: none;
}
}

Let us know if you have any other questions,

Thanks,
laranz.