Home / Questions / 517443
Accepted
C0D3BREAK3R
Asked: 2022-07-28 10:28:38 +0800 CST 2022-07-28 10:28:38 +0800 CST

How to remove white space above and below a video iframe belonging to Vimeo?

  • 772

I have the following HTML structure:

<main class="video">

    <div class="video__contenedor">

        <div class="video__descripcion">
            <div id="video__descripcion__contenido">Descripcion</div>
            <button class="video__descripcion__boton">Ver Más Información</button>

        </div>

        <div class="video__contenido">

            <iframe src="https://player.vimeo.com/video/88509099" width="640" height="480" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>

        </div>

    </div>

</main>

The CSS code that belongs to each wrapper class is as follows:

.video {
    display        : flex;
    justify-content: center;
    font-family    : Montserrat;
}

.video__contenedor {
    width           : 80%;
    background-color: #158eff;
    padding         : 15px;
    border-radius   : 10px;
    color           : white;
    margin-top      : 20px;
    font-size       : 18px;
}

.video__contenido {
    margin-top: 20px;
}

iframe {
    width: 100%;
}

enter image description here

The way I get the Vimeo iframe to width: 100%stay in my container is with , but this leaves me with a few spaces on the sides or top and bottom (depending on the width of the screen) which I marked with red rectangles on the image, I can't remove these spaces despite having tried different CSS properties. Does anyone know if this is possible and if so what I should do? Thanks in advance

css

1 Answers

  1. Best Answer

    I found the solution to my problem making use of the inline styles that it adds to the option: "responsive" within the video sharing options that Vimeo integrates. Basically you had to do the following:

    Contain the iframein a div with the following CSS properties:

    .video__contenido__vimeo {
    padding : 75% 0 0 0;
    position: relative;
}

    Add the following CSS properties to the iframe:

    iframe {
    position: absolute;
    top     : 0;
    left    : 0;
    width   : 100%;
    height  : 100%;
}

    The HTML structure looks like this:

    <main class="video">

    <div class="video__contenedor">

        <div class="video__descripcion">
            <div id="video__descripcion__contenido">Descripcion</div>
            <button class="video__descripcion__boton">Ver Más Información</button>

        </div>

        <div class="video__contenido">

            <div class="video__contenido__vimeo">
                <iframe src="https://player.vimeo.com/video/88509099?h=538cd3a41c" width="640" height="480" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
            </div>

        </div>

    </div>

</main>
    • 1