More padding/space beneath embedded tweets and YouTube videos

hoorayrun · Member · Apr 13, 2019 at 3:39 am
Copy link

Add topic to favorites
Is there something I can add to my CSS so that all embedded tweets and YouTube videos in posts have space beneath them consistent with regular paragraphs and self-uploaded photos, horizontal lines, etc.? Looking for even spacing throughout posts, no matter the media involved.

Here’s a link to a piece of writing that has both an embedded tweet and YouTube video so you can see the spacing in question here: https://hoorayrun.com/2014/12/13/grant-fisher-wins-second-straight-foot-locker-national-title/

Thanks for any and all help!

The blog I need help with is: (visible only to logged in users)
raduconstantin1 · Member · Apr 14, 2019 at 8:39 am
Copy link
Hey,

This CSS should do the trick for the embedded tweets and YouTube videos:
.video-container, .embed-twitter { margin-bottom: 1.75rem; }

Can you give it a try and tell me if this is what you’re looking for, please?
hoorayrun · Member · Apr 14, 2019 at 5:02 pm
Copy link
That absolutely did it! Much appreciation.
hoorayrun · Member · Apr 18, 2019 at 12:03 am
Copy link
How about same thing for SoundCloud embeds? This post: https://hoorayrun.com/2018/12/16/hr-pod-alyssa-godesky-on-vermont-long-trail-fkt-mental-preparation-triathlon/
raduconstantin1 · Member · Apr 18, 2019 at 3:58 am
Copy link
Hey,

Can you try this CSS and tell me if it does the trick, please?
iframe[src*="soundcloud.com"] { margin-bottom: 1.75rem; }
hoorayrun · Member · Apr 19, 2019 at 10:13 pm
Copy link
Did it—thanks! Couple more, if you’re up for it. Same thing for self-uploaded videos (wpvideo), as in this post: https://hoorayrun.com/2017/11/07/top-7-american-marathon-performances-from-2017-wmm-races/

You’ll also see Getty Images embeds in that post. You see the space above the Getty embeds? Is there a way to shrink that space as well to line up with the consistent spacing we have going?

Thanks as always!
raduconstantin1 · Member · Apr 20, 2019 at 12:33 am
Copy link
Hey,

You can replace all the previous CSS snippets with this one:
.video-container, .embed-twitter, iframe[src*="soundcloud.com"], iframe[src*="videopress.com"] { margin-bottom: 1.75rem; }

This will take care of all the elements we talked so far. We just make everything more compact, in just one CSS rule.

As for the Getty images, I’m not quite sure that this CSS will do the job for sure but you can give it a try and tell me how it goes:
.getty.embed { display: block !important; }
hoorayrun · Member · Apr 20, 2019 at 3:20 am
Copy link
Awesome. Thanks for that compact rule. Getty CSS did indeed shrink the space the bit. Great work, and much appreciation!

No items found.