Unwanted space line after video

  • Unknown's avatar
    sophiakotullaname · Member ·

    Hi,

    I embedded a video on https://burnout-praxis.com/ihht-sauerstoff-hoehentraining-berlin/ (not via YouTube or Vimeo but as an uploaded video directly on WordPress).

    Unfortunately, the space line below the video is twice as big as the space line above the video, no matter which browser I use. The source code looks good (no unnecessary space lines etc.).

    Is there a CSS code to fix this issue?

    Thanks!
    Sophia

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

  • julinedossantos1 · Staff ·

    Hi,
    This rule is causing the larger space:

    embed, iframe, object {
margin-bottom: 1.5em;
max-width: 100%;
}

    The CSS rule is setting a default bottom margin of 1.5 in (a unit of measurement in CSS) on all elements with the tag name “embed”, “iframe”, and “object”.
    It is likely that this default bottom margin was added as a general style for these elements and is causing the unwanted space below your specific iframe element. It’s also important to check if the iframe’s parent element has any margin or padding that might be adding that space. So to fix the issue you can either remove this rule or give your iframe a more specific class or id and override this rule with your desired bottom margin.
    you could also edit the existing CSS rule to reduce the margin-bottom to a smaller value or set it to 0, if you want to keep this rule for the other elements.

    For example, you could change the rule to:

    embed, iframe, object {
    margin-bottom: 0;
    max-width: 100%;
    }


    This would set the margin-bottom to 0 for all elements with the tag name “embed”, “iframe”, and “object”. However, this will affect all the elements on the page that have that tag name and not only the one that you want to change.

    Another way to keep this rule but only for the iframe that you want to change, is to add a class or id to the iframe and override this rule with a more specific one, as we discussed before.

    For example, if you gave the class “my-iframe” to your iframe and set the margin-bottom to 0, the CSS will be:

    .my-iframe {
margin-bottom: 0;
}

    This will only target the iframe element with the class “my-iframe” and will not affect other elements with the tag name “iframe” on your page.

  • Unknown's avatar
    sophiakotullaname · Member ·

    Wow, thank you so much!!

    But what does it exactly mean (and how does it exactly work) to give the class “my-iframe” to the respective video so that the code…

    .my-iframe {
margin-bottom: 0;
}

    …can be assigned to this video?

  • julinedossantos1 · Staff ·

    You can give your class any name. When you give a class “my-iframe” to an iframe element in your HTML, you create a way to identify that specific element in your CSS. You can then target that element with the class “my-iframe” in your CSS by using the class selector (.) to apply styles.
    You can also use an id. The id selector is more specific than the class selector, so it will take precedence in case of conflict.

    It would be easier to just edit the existing CSS and replace margin-bottom: 1.5em; for margin-bottom: 0;

    But maybe there is an even easier way.
    I’ll tag the WordPress.com team to bring us more information.

  • Unknown's avatar
    sophiakotullaname · Member ·

    Great, it worked. Thank you so much again!!

  • The topic ‘Unwanted space line after video’ is closed to new replies.