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

热门github

1
Implementation of paper - YOLOv9: Learning What You Want to Learn Using Programmable Gradient Information
2
A Windows and Office activator using HWID / Ohook / KMS38 / Online KMS activation methods, with a focus on open-source code and fewer antivirus detections.
3
Get up and running with Llama 2, Mistral, Gemma, and other large language models.
4
该项目可以让你通过订阅的方式使用Cloudflare WARP+，自动获取流量。This project enables you to use Cloudflare WARP+ through subscription, automatically acquiring traffic.
5
Multi functional app to find duplicates, empty folders, similar images etc.
6
Xray panel supporting multi-protocol multi-user expire day & traffic & ip limit (Vmess & Vless & Trojan & ShadowSocks & Wireguard)
7
The Free Software Media System
8
lightweight, standalone C++ inference engine for Google's Gemma models.
9
📚 Freely available programming books
10
A collective list of free APIs
11
1️⃣🐝🏎️ The One Billion Row Challenge -- A fun exploration of how quickly 1B rows from a text file can be aggregated with Java
12
🎓 Path to a free self-taught education in Computer Science!
13
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...
14
This repository contains System Design resources which are useful while preparing for interviews and learning Distributed Systems
15
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.