Denis Stephanov Denis Stephanov - 2 months ago 6
CSS Question

How can I fit displayed video on div background?

can someone help me to fit video on website background? Video source is from Vimeo ... i use iframe where I set video as src

<iframe src="https://player.vimeo.com/video/45628635?loop=1&background=1" width="100%" height="500px" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>


My required state you can see on image
enter image description here

Answer

Give iframe tag its own class, put it in the parent container, like so.

<div class="container">
    <iframe class="vid" src="https://player.vimeo.com/video/45628635?loop=1&background=1" width="100%" height="500px" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>

then scale-up the video using CSS transform and give container width of 100% and height of 500px and hide the overflow.

    .vid{
    transform: scale(2.5);
}

.container{
    width: 100%;
    height: 500px;
    overflow: hidden;
}

And put overflow hidden on whatever object this "container" div going to be located in.