- This topic has 9 replies, 4 voices, and was last updated 2 years, 8 months ago by
.
-
Posts
-
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?
Customer Support
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.
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.
Customer Support
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-16class and this is what i see:
Could you try that and disable any optimization / cache plugins to see if they are interfering.
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?
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.
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 ?
Thanks! I’ll see if they can help!
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?
Customer Support
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.
- You must be logged in to reply to this topic.
