Warm tip: This article is reproduced from serverfault.com, please click

其他-使用CSS将背景隐藏在属于其他域的iframe中

(其他 - Hiding the background in an iframe that belongs to a different domain with css)

发布于 2020-11-27 22:38:28
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

我想弄清楚如何在iframe中隐藏黑色背景。问题是由于跨域请求,我无法对背景进行任何更改以使其透明,因此我需要使用CSS隐藏黑色背景,但是我找不到解决方案。我曾在Google上尝试过各种方法,但它们只能在YouTube视频上使用,而不能在具有自己的视频播放器(不使用 Vanilla html5视频播放器)的aws视频或任何非视频托管网站上使用。

Questioner
hotroad
Viewed
0
Zlerp 2020-11-28 08:33:31

黑色背景是因为iframe的大小与自然视频的大小不同。我们可以通过定义iframe的高度和宽度来删除背景,如下所示:

看到宽度更改为 226px

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

或以下说明的响应式版本:

我所做的就是找到iframe中指定的视频的长宽比,方法是仅播放宽度和高度,直到只显示猫的图像,周围没有黑条。

这给了我元素的宽度226px和高度315px,我需要为父元素创建长宽比。

使用此处显示的相同逻辑,我使iframe的包装容器具有一个
padding-top: calc((315 / 226) * 100%);

然后,我在该包装容器周围添加了另一个容器,并在那里定义了它的width属性。基于该主包装容器的宽度,内包装容器的高度将相应地增长/缩小。

然后,使用positon: absolute将iframe浮动在其上height: 100%; width: 100%;

那应该是你开始的好地方。希望这可以帮助。

请在此处查看Codepen:https ://codepen.io/Zlerp/pen/dypPybj