Keep YouTube thumbnail aspect ratio in Masonry blog view

Hi Kim,

It's possible with some steps. Checkout this post: https://generatepress.com/forums/topic/embeding-youtube-video-into-post-videos-height-is-not-responsive/

Let me know if this helps.

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

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

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

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

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 :)

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

Definitely something to think about :)

Thanks!

🙂