0

I've got this element (.tas-fullscreen), which contains a .media-container and a .content-container. The media-container contains a video element and the content-container contains text. It looks fine when not rotating the .tas-fullscreen element, but when I rotate it, the video element is automatically placed above all elements. The text element, should always be on top of the video element.

I've tried with a high z-index on the .content-container and a low on the .media-container, but with out any effect.

Here's a simple example

.tas-fullscreen{
    position: absolute;
    left: 0px;
    top:600px;
    overflow: hidden;
    z-index: 10;
    height: 300px;
    width: 600px;
    font-size: 46px;
    transform: rotate(-90deg);
    transform-origin: 0% 0%;
    display: flex;
}

.media-container{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:0;
}

.media-content{
  width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index:10;
}

video{
  object-fit: cover;
  height: 100%;
  width:100%;
  z-index:0;
}
<div class="tas-fullscreen">
<div>
<div class="media-container">
<video class="video" autoplay="true" loop="" muted="" data-origwidth="0" data-origheight="0"><source src="https://theadstore.io/wp-content/uploads/2020/09/dcf3ca22-d06f-44d1-b140-b7fdbf7faffa.mp4" type="video/mp4"></video>
</div>
<div class="media-content">
<div class="heading">
This is the header
</div>
<div class="body">
This is the body
</div>
</div>
</div>
</div>

https://theadstore.io/?p=2232&a=niels

Hope you can help me.

Kasper Gantzhorn
  • 201
  • 4
  • 12
  • Can you add a minimal code example that demonstrates the problem. – A Haworth Oct 12 '20 at 22:20
  • @AHaworth I've added a simple example, thanks. – Kasper Gantzhorn Oct 13 '20 at 08:49
  • Hi, your snippet is working on Windows 10 Edge and Chrome (in that the text is on top of the video OK, but the video just sits in the middle of the main div taking full height (300px) and seemingly the same width. On FF on W10 the text shows above the video OK and the video takes the full width. IE11 on W10 shows some text over the video but most is lost in the black surround and the video is the same sizing as on Edge/Chrome. On iPadIOS Safari the video seems to (almost) take up the full width but the text disappears. Which browsers/systems are you interested in and which are you using? – A Haworth Oct 13 '20 at 19:34
  • Hi @AHaworth, wow thanks for testing all these browser vendors/os's. I'm using Crome on a Mac (Catalina) and I am targeting the browser on a tv screen (Samsung e.g.). And they seem to render it similar. I would imagine that the reason for the different views is, that I havn't browser prefixed the properties with -moz- -ms- etc. But I dont think that this has something to do with the fact, that the text is underneath the video on my end. Does it make sense? – Kasper Gantzhorn Oct 14 '20 at 09:52
  • I don't think you should need to prefix everything nowadays, especially for Chrome, however, I'll carry on checking when I can a bit of time later today. There is something strange about Chrome (and therefore possibly Edge) and setting video to cover - it just doesn't, but it treats the text better (on W10). Weird. – A Haworth Oct 14 '20 at 13:46
  • There seems to be quite a bit of discussion on Chrome (in particular) and the alteration to stacking context that occurs when a transform is applied. The details are a bit beyond me, see for example [link]https://stackoverflow.com/questions/20851452/z-index-is-canceled-by-setting-transformrotate However, splitting into two 'outer' divs one with video and one with the text seems to work, please see answer. Sorry I cant test it on MacOS but Chrome on Windows10 and iPADIOS13 seems to work. – A Haworth Oct 14 '20 at 18:59

1 Answers1

0

The given snippet worked as expected/required on FireFox on Window10. It worked to an extent on Edge on W10 in that the text appeared on top of the video, but the video was confined to full height (300px) and corresponding (auto) width - not seeming to take any notice of cover. On IOS13 Safari and on Chrome the video turned and took up the full width and height without distortion (ie cover seemed to work) but the text was hidden. It was this last phenomenon that was reported in the question.

As it is Chrome that is of interest a method which worked for that was sought and is given here. It requires two lots of an outer div with class tas-fullscreen. The first contains the video and the div is given z-index -1 (z-index 0 or above did not work). The second contains the text and is given a higher z-index.

<!DOCTYPE html>
<html>
<head>
<style>
.tas-fullscreen{
    position: absolute;
    left: 0px;
    top:600px;
    overflow: hidden;
    height: 300px;
    width: 600px;
    font-size: 46px;
    transform: rotate(-90deg);
    transform-origin: 0% 0%;
    display: flex;
}

.media-container{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:0;
}

.media-content{
  width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index:10;
}

video{
  positon: absolute;
  object-fit: cover;
  height: 100%;
  width:100%;
}
</style>
</head>
<body>
<div class="tas-fullscreen" style="z-index:-1;">
<div>
<div class="media-container">
<video class="video" autoplay="true" loop="" muted="" data-origwidth="0" data-origheight="0"><source src="https://theadstore.io/wp-content/uploads/2020/09/dcf3ca22-d06f-44d1-b140-b7fdbf7faffa.mp4" type="video/mp4"></video>
</div>
</div>
</div>
<div class="tas-fullscreen" style="z-index:100;background-cyan:opacity:0.5;">
<div class="media-content">
<div class="heading">
This is the header
</div>
<div class="body">
This is the body
</div>
</div>
</div>
</body>
</html>

This snippet has been tested on Chrome and FF on W10 and seems to work. It works on Edge except the video does not cover, it is contained. The snippet has also been tested on Safari and Chrome on iPadIOS13 and seems to work OK.

A Haworth
  • 30,908
  • 4
  • 11
  • 14