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视频或任何非视频托管网站上使用。
黑色背景是因为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