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

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

Home Forums Support Lightweight Grid Columns – YouTube height values not set automatically

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #454712
    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!

    GeneratePress 2.0.1
    GP Premium 1.5.6
    #454873
    Leo
    Staff
    Customer Support

    Hi there,

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

    Let me know if this helps.

    #454877
    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?

    #454951
    Leo
    Staff
    Customer Support

    I don’t think so but will ask Tom to confirm ๐Ÿ™‚

    #454980
    Tom
    Lead Developer
    Lead Developer

    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.

    #455249
    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.

    #455327
    Tom
    Lead Developer
    Lead Developer

    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!

    #455336
    drew

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

    #455523
    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

    http://snifflevalve.com
    Tutorials and tips for GeneratePress, WP Show Posts, WordPress and Elementor

    #489656
    Jim

    Excellent! Thanks

    #494196
    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:

    View post on imgur.com

    Any idea how to solve this?

    #494499
    Leo
    Staff
    Customer Support

    Can you link us to the page in question?

    #494706
    Jim
    #494907
    Tom
    Lead Developer
    Lead Developer

    What if you remove this line from the code?:

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

    #494970
    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

Viewing 15 posts - 1 through 15 (of 18 total)
  • You must be logged in to reply to this topic.