[Resolved] Lightweight Grid Columns – YouTube height values not set automatically

[Drew]

I’ve encountered an issue using Lightweight Grid Columns where embedded YouTube vids are parsed without any problem but they appear to be applying a fixed pixel height instead of resizing responsively.

From what I can tell, it appears the .embed-youtube class has no height or width values set: https://www.screencast.com/t/eUdhlJCrqRy

While the iframe.youtube-player class has the max-width set to 100% but no height value: https://www.screencast.com/t/ecsypqBEt6u

I’ve attempted to adjust the height value by setting to “auto” but that produces an equally odd outcome. What am I missing here?

Many thanks!

[Leo]

Hi there,

You might need to do this: https://docs.generatepress.com/article/responsive-videos/

Let me know if this helps.

[Drew]

Many thanks, that’s certainly better but a huge PITN for my client level users who expect to just plug in the YouTube URL and go. Asking them to switch over to text view then remember the div wrapper and use it properly is going to be a major non-starter level conversation.

Is there no way to apply this without requiring them to manually enter the div wrappers?

[Leo]

I don’t think so but will ask Tom to confirm 🙂

[Tom]

Maybe one day browsers will make videos responsive by default, but for now there’s no other way of doing it. There might be a javascript library out there that will do it automatically for you.

[Drew]

Hi Tom, thanks for the feedback. I think I may have found a solution for you to offer users:

I created a snippet using this:

function alx_embed_html( $html ) {
    return '<div class="video-container">' . $html . '</div>';
}
 
add_filter( 'embed_oembed_html', 'alx_embed_html', 10, 3 );
add_filter( 'video_embed_html', 'alx_embed_html' );

…then this CSS (which is nearly identical to what Leo provided, save the classes ):

.video-container { 
	position: relative; 
	padding-bottom: 56.25%; 
	height: 0; 
        overflow: 
        hidden; 
}
.video-container iframe, .video-container object, .video-container embed, .video-container video { 
	position: absolute; 
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 100%; 
}

I attempted to use the existing videoWrapper class in place of video-container in the snippet but it kept throwing activation error (FYI, I’m using Bunge’s Code Snippets plugin).

If there’s a way to use the videoWrapper class, that seems to make more sense than adding a new class but I’m curious to know what you think there.

If it works out, it could be a nice addition to your existing list of snippets at GitHub.

[Tom]

The class name doesn’t really matter as long as everything else is the same.

That’s a very cool solution – thank you for sharing it!

[Drew]

My pleasure, and by all means, let me know if you come up with any improvements.

[Lyle]

drew,

Thank you so much for your solution! Works perfectly 🙂 This is going to make it so much easier when creating my video tutorial pages!

Cheers!
Lyle

[Jim]

Excellent! Thanks

[Jim]

Works great on video’s but if you post a link to a website it also is enclosed inside this video div giving it a large box (padding) beneath the link:

https://i.imgur.com/Td8JqY1.png

Any idea how to solve this?

[Leo]

Can you link us to the page in question?

[Jim]

Sure:
https://www.fatsforum.nl/forums/topic/duitsland/

[Tom]

What if you remove this line from the code?:

add_filter( 'embed_oembed_html', 'alx_embed_html', 10, 3 );

[Jim]

Hi Tom,
That helps but also removes the responsive format of video’s; the video’s no longer are embedded inside the video container

[Author]

Posts