Search code examples
javascriptcsshtmliframevimeo

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

Solution

  • 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.