Remove Large Gaps Between Embedded Video

  • weeklyarsenal · Member ·

    Hello.

    I am looking to for a way to remove the large space between the top (and bottom) of videos that are embedded straight from streamable.com .

    Example: https://arsenalweekly.com/2020/01/22/objective-player-ratings-2019-20-chelse-away/

    The issues begin after the “Player Ratings” heading about 1/4 of the way down the page.

    I have tried two things:

    1. simply copy/pasting the video link
    2. Trying to use the embed code via the HTML editor:

    Using option 1 will auto-embed the video, but leave huge gaps between the text and video (as in the example above).

    Using option 2 will show the video correctly when I return to the visual editor, but when published the video does not appear at all, and instead shows blank space.

    The blog I need help with is: (visible only to logged in users)

  • supernovia · Staff ·

    Hi @weeklyarsenal, the issue seems to be that the video player space is taller than your videos. So your video is getting centered in the middle, leaving gaps above and below. You might be able to address this with CSS, but will all of your videos have this aspect ratio, where they’re much wider than they are tall, or will you sometimes have square videos or taller videos?

  • weeklyarsenal · Member ·

    All videos will be this aspect ratio (or close to it)

    :)

  • staff-blorbo · Staff ·

    Via Custom CSS https://en.support.wordpress.com/custom-design/custom-css/ add this and adjust as desired:

    embed, iframe, object {
    max-height: 400px;
}
  • supernovia · Staff ·

    OK. Then, while this is a bit outside our scope of CSS support you could try something like this:

    @media screen and min-width(782px) {
  iframe.wp-embedded-content {
    max-height: 395px;
    background-color: black;
  }
}

    You’ll need to optimize the px sizes, and probably copy this a few times for different screen sizes (like 320px and 600px) and make adjustments so it looks good to you. You’ll see some black bars at in-between widths. You can specify a different color if you’d like.

  • weeklyarsenal · Member ·

    You guys are terrific. Thanks so much for your help.

  • weeklyarsenal · Member ·

    Sorry, one more question. This works like a charm on tablet and desktop formats. But on mobile it’s still got pretty large gaps. Anything I can do to fix on that front?

  • supernovia · Staff ·

    But on mobile it’s still got pretty large gaps. Anything I can do to fix on that front?

    You could do max-width(320px) for one of them to see how that works for you, then adjust the height accordingly.

    You can also try working from smallest to largest:

    @media screen and min-width(320px) {
  iframe.wp-embedded-content {
    max-height: 100px /* you probably need to change that */;
    background-color: black;
  }
}

@media screen and min-width(600px) {
  iframe.wp-embedded-content {
    max-height: 200px /* you may need to adjust this too */;
    background-color: black;
  }
}

@media screen and min-width(782px) {
  iframe.wp-embedded-content {
    max-height: 395px;
    background-color: black;
  }
}

    Again this is outside the scope of support a bit, but the code we’ve sent should get you most of the way there if you’ll tinker with it a bit. Hoping it helps!

  • weeklyarsenal · Member ·

    Thanks so much for your help :)

  • The topic ‘Remove Large Gaps Between Embedded Video’ is closed to new replies.