More padding/space beneath embedded tweets and YouTube videos

  • Author
    Posts
  • #3296131

    hoorayrun
    Member

    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 hoorayrun.com.

    #3296550

    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?

    #3296650

    hoorayrun
    Member

    That absolutely did it! Much appreciation.

    #3298183

    hoorayrun
    Member
    #3298212

    Hey,

    Can you try this CSS and tell me if it does the trick, please?

    iframe[src*="soundcloud.com"] {
    margin-bottom: 1.75rem;
    }

    #3299074

    hoorayrun
    Member

    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!

    #3299092

    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;
    }

    #3299115

    hoorayrun
    Member

    Awesome. Thanks for that compact rule. Getty CSS did indeed shrink the space the bit. Great work, and much appreciation!

You must be logged in to reply to this topic.