- This topic has 9 replies, 3 voices, and was last updated 8 years, 8 months ago by
Kim.
-
AuthorPosts
-
February 25, 2017 at 3:42 am #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
February 25, 2017 at 7:41 am #283857Leo
StaffCustomer SupportHi 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.
February 25, 2017 at 10:34 am #283904Kim
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
February 25, 2017 at 10:52 am #283914Tom
Lead DeveloperLead DeveloperThere’s also a documentation article on this which will stay updated if anything changes: https://docs.generatepress.com/article/responsive-videos/
February 25, 2017 at 10:55 am #283916Leo
StaffCustomer Supportahh sorry Kim I missed the instruction on the docs page!
February 25, 2017 at 10:58 am #283917Kim
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
February 25, 2017 at 11:01 am #283919Tom
Lead DeveloperLead DeveloperNever 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 🙂
February 25, 2017 at 11:09 am #283921Kim
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
February 25, 2017 at 9:44 pm #284067Tom
Lead DeveloperLead DeveloperDefinitely something to think about 🙂
Thanks!
February 25, 2017 at 10:22 pm #284069Kim
🙂
-
AuthorPosts
- You must be logged in to reply to this topic.