Remove black background vimeo player iframe

user_4364847 0
Viewed 969

I have embeded a vimeo player in my HTML page within an IFrame. But I noticed that there's a black background in the image. I would prefer the video to fill the entire video container but I can't seem to modify the #player inside an iframe. How do I do this? Below is the image of the actual output and the sourcecode I used

enter image description here

And here's how I defined it

<div class="video-holder">
    <iframe src="https://player.vimeo.com/video/5590682?" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
</div>

Now I tried doing something like this

.video-holder. {
   position: relative;
}
.video-holder iframe body html #player {
    // Code here. 
   position: absolute;
   top: 0;
   left: 0;
   width: 100%
   height: 100%
   max-width: 100%;
}

But upon checking, it seems that my selector does not work and it can't modify the #player element. How do I make the video fill the entire container (.video-holder).

Note that if I resize my browser into smaller width, the video fill the container in certain width but what I want is make it fit whatever the size of the screen. Something like this enter image description here

So basically I want to override the max-width: calc(133.333vh) defined in the #player element

I know modifying the iframe is agains the XSS but is there a way to tell the video in vimeo to fit the container or make the width 100% or something

css-selectors css
1 Answers

Add background-color style to the iframe.

So your code should look like this:

<div class="video-holder">
    <iframe src="https://player.vimeo.com/video/5590682?" style="background-color: #fff" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
</div>

Change the background-color to whatever you want.

This will solve your problem.

user_100515780
Related