Vimeo embed code has huge spacing above and below video on mobile

[yanikphoto]

I simply paste the vimeo embed code in a post and the spacing is perfect on desktop:

Here’s the code:

But on mobile there’s huge spacing:

How can I fix this?

Thanks!

[tristup]

Hi @yanikphoto,

Thanks for reaching out.
It seems that the IFrame height is the reason behind your issue. Through the screenshot it is very difficult to be sure on that, we need to examine the page where you are having this issue.
Alternatively, I will suggest you use the video element instead of the raw code. If you are using the default Block editor, I would suggest you create a Global Blocks using the video element and use that as a shortcode in your post to avoid this issue.
Here you can learn how to create a Global Blocks and use it as shortcode.

If you are not able to find the solution with the above and want us to check, please provide login credentials for your site in a secure note to examine it further, including:

– WordPress Site URL & Login URL
– Page/Post URL where you are having this issue.
– WordPress Admin username/password

To create a secure note, click the key icon underneath any of your posts.

Thanks

[yanikphoto]

secure note added

[prakash_s]

Hello @yanikphoto,

It seems that you Iframe height is the reason behind your issue it is rendering full height of in mobile as well to get rid of this issue you can use this custom CSS code under X/Pro-->Theme Option --->CSS

@media(max-width:979px){
.single-sfwd-lessons .entry-content iframe {
    height: auto;
    width: 100%;
}

}

The purpose of providing the custom CSS to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.

Thanks

[yanikphoto]

thanks! That fixed it!

[prakash_s]

Hello @yanikphoto

Glad that we were able to help you.

Thanks