How can I make a fixed-position element escape a 3D-transformed element?

194 Views Asked by At

I have an element that has a CSS 3D Tranform applied to it. Inside that element is a video that I want to use as a background, using position: fixed and object-fit: cover. Without altering the shape of the DOM, and without removing the 3D Transform from the container, how can I make sure that the fixed-position video element stretches across the entire viewport, rather than being cut off at the edges of the transformed parent?

#bgairplane {
    display: block!important;
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
}

#container {
  margin: 40px;
  border: 1px solid red;
  transform: translateY(0);
}
<div id="container">
  <h1>Hello World</h1>
  <video playsinline="" autoplay="" muted="" loop="" id="bgairplane" style="display:none;">
    <source src="https://www.dropbox.com/s/1u09y4musotvjsp/In-The-Clouds.mp4?raw=1" type="video/mp4">
  </video>
</div>

0

There are 0 best solutions below