[Support request] Youtube Shorts (vertical vides) will not embed properly on mobile devices

[Myles]

I created a new blog post here: https://tacticalhyve.com/dryfiremag-review/

25% down you will see an embedded youtube short. I got this to look find by including the Youtube block within a container, and adjusting the the additional CSS class of the youtube block to: wp-embed-aspect-9-16 wp-has-aspect-ratio

However, when i view everything on a mobile device. the video is not in a vertical orientation, rather it is a square version with a lot of space above and below it. I first have to click the video on a mobile device, then the size increases to the right size, then I have to press play again to watch the video.

Any idea what’s going on?

[Leo]

Hi there,

Not sure if I fully understand.

The YouTube embed block is a WP core block and the theme shouldn’t cause any issues.

Can you first remove the custom CSS (if any) you’ve added first?

And I would not recommend wrapping a GB container outside – it’s not supposed to be used like this.

[Myles]

Youtube short videos are 9:16 in nature and not 16:9.

When I use the normal functionality without the CSS, the video does not show up properly. It shows up in landscape mode.

I used the CSS and the container to help control/manage the dimensions of the video. I do not know any other way.

If I use the normal Youtube embed block, nothing looks right.

[David]

Hi there,

i took that video, and added it as YT Embed at the top level of the page ( ie. not inside a container block ) and gave it the 9-16 class and this is what i see:

Could you try that and disable any optimization / cache plugins to see if they are interfering.

[Myles]

Thanks, David.

When I do that, things look good on mobile, but without a container, the video is HUGE on desktop (although the dimensions are (9:16).

How do I decrease the size on desktop?

[Myles]

Hi David,

Can you let me know what you’re specifically doing?

I used the custom HTML block to embed the youtube short code.

On desktop, everything looks good.

On mobile, it does not look right.

IF you go here on a mobile site, https://tacticalhyve.com/dryfiremag-review/, you will see that things look off. There is a lot of space before and after the video, and things look good, only after click on the video. Then one must click it again to watch.

[David]

I simply pasted the YouTube video URL into WP and let WP create the YT embed.
Then in Advanced > Additional CSS Class(es) i added: wp-embed-aspect-9-16 wp-has-aspect-ratio
But this will apply to desktop and mobile.

However, on your site, what i see is a placeholder poster image being displayed in an iframe, that has to be clicked before the video is loaded. Its an optimization being added by Nitro. And i cannot see how to manipulate that placeholder to show the size you require. Can you check with Nitro support ?

[Myles]

Thanks! I’ll see if they can help!

[Myles]

Hi David,

I checked and it’s NitroPack’s Lazy Loading feature that’s activated for iframes.

Nitropack does allow specifying CSS selectors to disable image lazy loading for matching elements, so I don’t have to disable iframe lazy loading sitewide.

Do you know what css selector, if any, matches the custom HTML/embed element?

[Ying]

Usually, there will be this class: wp-block-embed-youtube, but when I check your site, it seems Nitropack changed it’s HTML and I don’t see any specific class.

I would recommend reaching out the Nitropack’s support for how to not lazyload YouTube embeds.

[Author]

Posts