[Resolved] Keep YouTube thumbnail aspect ratio in Masonry blog view

Home Forums Support Keep YouTube thumbnail aspect ratio in Masonry blog view

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #283765
    Kim

    Hi!

    As you can see from this screenshot the Customize>Blog>Masonry>Block Width>Medium display option crops the YouTube thumbnails rather hard left and right, making a very ‘tall’ and oddly cropped image. The same thing happens if I choose two columns under Blog>Columns. Is it somehow possible to keep the original aspect ratio, even on these narrower post display options?

    Best, Kim

    GeneratePress 1.3.44
    #283857
    Leo
    Staff
    Customer Support
    #283904
    Kim

    OK, after messing around a bit I got it to work. As the post (and included video) you link to still assume a basic techie-ness I don’t really possess, I thought I’d share how I did it in a hopefully even simpler step-by-step ‘recipe’ for the benefit of non-coders like myself:

    1. Go to WP Dashboard>Appearance>Customize>Additional CSS
    2. Paste in this:

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

    3. Save
    4. Go to the post in question
    5. Open the Text Editor (using Visual Editor won’t work)
    6. Paste in this:

    <div class="video-container">
    [YouTube-url]
    </div>

    7. Save

    Obviously replace [YouTube-url] above with the url of your video. This also works with embed codes, but for me at least, using the url is simpler if I can get away with it. The last bit of code (the <div> one) is quite ‘sensitive’; trying to put it on a single line, or adding it in the Visual Editor broke it.

    This method works as of the date of this post, on GeneratePress 1.3.44, WordPress 4.7.2 and Safari 10.0.3. If somebody with more technical nous than myself can refine it that would be awesome. If it got built into the theme… well, that would be a dream come true:)

    Best, Kim

    #283914
    Tom
    Lead Developer
    Lead Developer

    There’s also a documentation article on this which will stay updated if anything changes: https://docs.generatepress.com/article/responsive-videos/

    #283916
    Leo
    Staff
    Customer Support

    ahh sorry Kim I missed the instruction on the docs page!

    #283917
    Kim

    Aha! Maybe that’s the refined version I’m looking for right there:) Any chance this’ll be ‘hard-coded’ into GP any time soon?

    (PS! No sweat Leo, I missed it myself!)

    Best, Kim

    #283919
    Tom
    Lead Developer
    Lead Developer

    Never say never, but probably not in the immediate future. I try hard to only include CSS in the theme that the majority of users will use on each page load.

    For things like this, I tend to believe adding a bit of CSS specific to your needs is the better route 🙂

    #283921
    Kim

    Sounds like a good idea:) But maybe as a tiny on/off switch in the Customize panel, or even as an optional ‘vlogger-addon’ in the PG Premium addons section… ?

    Kim

    #284067
    Tom
    Lead Developer
    Lead Developer

    Definitely something to think about 🙂

    Thanks!

    #284069
    Kim

    🙂

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