CODEWITHSUNDEEP
javascriptcsshtmliframevimeo
Denis Stephanov
Denis Stephanov

Reputation: 5281

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

Upvotes: 1

Views: 1753

Answers (3)

David Saginashvili
David Saginashvili

Reputation: 495

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.

Upvotes: 1

srinivas.ln
srinivas.ln

Reputation: 309

From Swordys code... Check this snippet... 

.container{
  width:100%;
  height:500px;
  overflow:hidden;
    }
.vid{
 transform: scale(2.5);
}
<div class="container">
<iframe class="vid" src="https://player.vimeo.com/video/45628635?loop=1&background=1" width="80%" height="500px" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
  </div>

Upvotes: 0

mthomp
mthomp

Reputation: 249

That background seems to be part of the video. You could change the width to cut off the black background like in this example. width:93% https://jsfiddle.net/ps96r3ub/

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

Upvotes: 0

Related Questions