Hiding the background in an iframe that belongs to a different domain with css

user_14204152 0
Viewed 47
body {
  height: 4000px;
}

.container-fluid {
  z-index: 10011;
  background: rgba(0,0,0,.5);
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0px;
  left: 0px;
  align-items: center;
  justify-content: center;
}

.video-wrap {
  z-index: 10012;
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 25px;
  height: 0;
  max-width: 800px;
  margin: 0 auto;
}
.video-wrap iframe {
  z-index: 10013;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-height: 1080px;
}

https://codepen.io/codepen_user_123/pen/JjRoPNW

I am trying to figure out how to hide the black background in the iframe. The problem is because of cross-domain requests, I cannot make any changes to the background to make it transparent, so I need to hide the black background using css, but I can't find a solution for it. I have tried various things on Google, but they only work on YouTube videos and not aws videos or any non video hosting websites with their own video players (not using vanilla html5 video players).

iframe css
1 Answers

The black background is because the iframe's size is not the same as the natural video size. we can remove the background by defining a height and width of the iframe like so:

See width changed to 226px

<iframe width="226" height="315" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/39255/cat.mp4" frameborder="0" allowfullscreen></iframe>

Or the responsive version explained below:

What I did was find the aspect ratio of the Video specified in the iframe by just playing with the width and height until only the image of the cat was showing with no black bars surrounding it.

That gave me the width 226px and height 315px of the element which I need to create the aspect ratio for the parent element.

Using the same logic shown here, I made the wrapping container of the iframe have a
padding-top: calc((315 / 226) * 100%);

Then I added another container around this wrapping container and defined it's width property there. Based on the width of this main-wrapping container, the inner wrapping container height will grow/shrink responsively.

Then I float the iframe over it with positon: absolute and height: 100%; width: 100%;

That should be a good place for you to start. hope this helps.

Please see Codepen here: https://codepen.io/Zlerp/pen/dypPybj

user_51632500
Related