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

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).

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

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

热门帖子

1
关于高质量 屏幕共享的问题
2
[开发者自荐] AirBattery: 在 Mac 端获取所有设备的电量并显示在 Dock 或状态栏上
3
南京移动 IPV6 被停
4
WireGuard 跨国组网失败后,一个新工具的诞生
5
你的 IDEA(2024.1) 在 macOS 上崩吗？
6
居家办公 兼谈普通人的无聊和解救方式
7
拼多多开始用灵动岛放广告了？
8
软路由 3865U 32GB msata 6 网口和 Aruba 325 IAP
9
之前 V2 老哥买的便宜的腾讯视频 特别是 4 月 10 日-4 月 15 日左右开的 都还在吗
10
既然外面的包子，饺子都是预制，还不如自己买？

热门github

1
A multi-platform library for OpenGL, OpenGL ES, Vulkan, window and input
2
Dev tool that writes scalable apps from scratch while the developer oversees the implementation
3
shadcn/ui, but for Svelte. ✨
4
The Python Risk Identification Tool for generative AI (PyRIT) is an open access automation framework to empower security professionals and machine learning engineers to proactively find risks in their generative AI systems.
5
Performance-portable, length-agnostic SIMD with runtime dispatch
6
ZK Credo
7
OpenCodeInterpreter: Integrating Code Generation with Execution and Refinement
8
Joplin - the secure note taking and to-do app with synchronisation capabilities for Windows, macOS, Linux, Android and iOS.
9
Mamba is a new state space model architecture showing promising performance on information-dense data such as language modeling, where previous subquadratic models fall short of Transformers. It is based on the line of progress on structured state space models, with an efficient hardware-aware design and implementation in the spirit of FlashAttention.
10
This repository contains System Design resources which are useful while preparing for interviews and learning Distributed Systems
11
Curso para aprender el lenguaje de programación Python desde cero y para principiantes. 75 clases, 37 horas en vídeo, código, proyectos y grupo de chat. Fundamentos, frontend, backend, testing, IA...
12
🎓 Path to a free self-taught education in Computer Science!
13
1️⃣🐝🏎️ The One Billion Row Challenge -- A fun exploration of how quickly 1B rows from a text file can be aggregated with Java
14
A collective list of free APIs
15
📚 Freely available programming books