Using flex and video

[asasass]

The code using flex, would any of these be written a different way now?

Updated code, the one before was to a question I didn’t ask yet.

https://jsfiddle.net/rs3hd7q4/

https://jsitor.com/8YgpagqQa6

Would any of the absolutes be changed to relative, or something like that?

or maybe something else would be placed in place of something else?

or would all these stay as they are?

.video-wrapper {
  max-width: 720px;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.ratio-keeper {
  position: absolute;
  top: 0;
  bottom: 0;
  height: 0;
  padding-top: 56.25%;
  width: 100%;
  margin: auto;
}

.video-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

[PaulOB]

Issues as discussed before.

You have all the answers now. It’s up to you to test and refine

[asasass]

I never noticed that.

I am able to see that now also,

How do you fix it?

I tried

min-height: 100%;
height: 100%;

[asasass]

Would the absolutes stay or be changed?

Which I don’t think has to do with the purple background showing.

Does flex get implemented differently with videos?

[PaulOB]

@asasass

Does flex get implemented differently with videos?

Flex always work the same.

The aspect ratio technique of videos is a separate topic and the video has to be absolutely placed onto the area created by the padding-top trick. the parent can be relative or absolute but obviously if it is absolute it is removed from the flow.

There are also issues compounded by the padding technique because flex is shrink wrap and if you try to use a percentage width inside a flex item you can end up getting zero. That’s why in the original demo I cleaned up for you (many years ago now) I took all that into account and gave you the minimal structure to work with.

@asasass

How do you fix it?

Use the flex rule I gave you it fixes it in one go.

[asasass]

Did I do it wrong here?

https://jsfiddle.net/2r0Lv39p/

.containera is not being used in the css.

Would the background be used on that one or not?

.containera{
    display: flex;
    flex: 1 0 0%;
     background-image:

<div class="containera hide">

I tried this:
https://jsfiddle.net/2r0Lv39p/2/

    .containera-inner{
    display: flex;
    flex: 1 0 0%;
     background-image:

<div class="containera hide">
	<div class="containera-inner">

[PaulOB]

@asasass

Did I do it wrong here?

I don’t think that its possible to change containera because of the aspect ratio technique. As soon as you remove the absolute positioning you lose the padding-top percentage and nothing shows. I believe we had a css grid version somewhere which got around this issue.

I think perhaps the easiest solution is to leave it as it is and perhaps put a min-height of 400px on the containera.

[asasass]

The code that uses the grid on the buttons uses this:

 .containerb:before{
    content:"";
    position:fixed;
    left:0;
    right:0;
    top:0;
    bottom:0;
    background:inherit;
  }

[asasass]

The fade in effect is causing the background image not to fill screen.

The code in this state.

https://jsfiddle.net/6x2vsLbq/

Both backgrounds fill the entire area.

No purple is showing ever.

.containera,
.containerb {
  animation: fadeBody 5s ease 0s forwards;
}

.containerb {
  display: flex;
  flex: 1 0 0%;
}

@keyframes fadeBody {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

As soon as these are added to it:

https://jsfiddle.net/nf4wg7ma/

The purple background is able to be visible.

How would this be fixed so that the purple body background can never be able to be seen when one of the covers is clicked on.

document.querySelector('html').classList.add('bodyfadea');
document.querySelector('html').classList.add('bodyfadeb');

.containera,
.containerb {
  animation: fadeBody 5s ease 0s forwards;
}
.containerb{
 display: flex;
 flex: 1 0 0%;
}

 .bodyfadea,
 .bodyfadeb  {
  background: #353198;
}

.bodyfadea body,
.bodyfadeb body{
  animation: fadeBody 5s ease forwards;
}

@keyframes fadeBody {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

[PaulOB]

@asasass

The code in this state.

https://jsfiddle.net/6x2vsLbq/

Both backgrounds fill the entire area.

I’m not following again as I can see the purple in both of those.

You have the solution with the fixed background anyway so why don’t you use that on both?

I believe I also gave you a solution with the nested div approach for containerb but containera can’t use that method so why not stick with the fixed background trick.

[asasass]

You’re better at finding the purple background than I am.

[asasass]

These are ways it can work on .containera

This way: Code 1
https://jsitor.com/k5QbXN3b3C

.tcell {
  display: flex;
  width: 100%;
  justify-content: center;
}

.containera {
  flex: 1;
  display: flex;
}

.containera-inner,
.containerb {
  display: flex;
  flex: 1 0 0%;
  animation: fadebody 5s ease 0s forwards;
  background-size: 165px 165px;
}

this way?

Code 2
https://jsitor.com/UEmjSHROtT

.tcell {
   display: flex;
   /* width: 100%; */
   justify-content: center;
   flex: 1;  /* new */
} 

.containera {
  flex: 1;
  display: flex;
}

.containera-inner,
.containerb {
  display: flex;
  flex: 1 0 0%;
  animation: fadebody 5s ease 0s forwards;
  background-size: 165px 165px;
}

or this way?

or would you do it a different way, maybe make changes to it?

Code 3
https://jsitor.com/r6XgyyS87y

.tcell {
  display: flex;
  /* width: 100%; */
  justify-content: center;
  flex: 1; /* new */
}

.containera,
.containerb {
  flex: 1;
  display: flex;
}

.containera-inner,
.containerb {
  flex: 1 0 0%;
  animation: fadebody 5s ease 0s forwards;
  background-size: 165px 165px;
}

And yes, I know the purple is still in the background, and I know the ways it can be fixed.

[asasass]

I think Code 3 is the one to go with here and I don’t think anything else needs to be done to the code except for adding the code that keeps the background covering the whole area.

[PaulOB]

@asasass

I think Code 3 is the one to go with here

You seem to be making progress on your own now

[asasass]

I don’t believe this code is using the fixed background trick.

https://jsitor.com/ZUx2yIeXnZ

https://jsfiddle.net/go73vacs/

I don’t see any purple at all.

If that isn’t using the fixed background trick, what is it using?

or, what is being done in the code that resolves that issue?

.outer {
  display: flex;
  min-height: 100%;
  box-sizing: border-box;
}

.tcell {
  display: flex;
  justify-content: center;
  flex: 1;
}

.containera,
.containerb {
  flex: 1;
  display: flex;
}

.containera-inner, 
.containerb-inner {
  display: flex;
}

.containera-inner,
.containerb {
  flex: 1 0 0%;
  animation: fadebody 5s ease 0s forwards;
  background-size: 165px 165px;
}

.containerb-inner {
  flex-wrap: wrap;
  margin: auto;
  width: 582px;
  min-width: 582px;
}

.curtain {
  position: relative;
  max-width: 640px;
  margin: auto;
  flex: 1 0 0%;
}

.ratio-keeper {
  position: relative;
  height: 0;
  padding-top: 56.25%;
  border-radius: 25px;
  margin: auto;
  overflow: hidden;
}

.video-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.playButton {
  position: relative;
}

[PaulOB]

@asasass

If that isn’t using the fixed background trick, what is it using?

You’d have to show me a page that you want it compared to but looking at that page you don’t seem to be setting a min-width on the ratio keeper so you never get any horizontal overflow. If the video was a fixed width this would happen.

However you could probably get around that (and we probably have already but I’ve lost track now)

Every change brings a slightly different behaviour and I think we are sometimes going around in circles back to issues that led us here in the first place.

I’d suggest that if this is your final design then it should be re-built from the ground up to simplify it and make it easier to manage. However if you are just contantly tweaking then there’s no point in rebuilding if you are going to change it again.

[asasass]

Are you saying min-width should be added to it?

In the flex version that was made here:
https://jsfiddle.net/3ckLg25b/

min-width was never added to it.

.curtain-ratio-keeper {
  position: relative;
  padding-top: 56.25%;
  border-radius: 25px;
  height: 0;
  overflow: hidden;
  border: 3px solid red;
}

[PaulOB]

@asasass

min-width was never added to it.

In that one the width is controlled by .inner that has a max and a min-width. You keep comparing apples and pears. Each one is slightly different and things are in place because of the differences. You need to have the same html before you can compare like for like.

I don’t really have to time today but I would suggest that you tidy up the html roughly like this into three distinct sections. (container a,b and c). Then you can show and hide each one and not have so many nestings in place You can then test each in isolation and check they are working.

This is the htmj l I would suggest but it may need to be changed if there are issues found.

The js of course is not working for the player as all the references are changed and that would need to be modified. I just hard coded the first one so that containera and containerb can be seen.

I would suggest that you test the html for this simpler version and then rearrange your js accordingly.

I am away for a week after tomorrow so that will give you time to make another hundred versions of it

[asasass]

When you were working on the code, you may have been working on the code where the javascript was giving you an error, I am not sure.

This is what you changed in the css / html js not added.
https://jsfiddle.net/0574j6g8/

There’s no issue with the javascript here:

The code you made changes to.

Both are the same.

There’s no errors in either one of these.
https://jsitor.com/ZUx2yIeXnZ

https://jsfiddle.net/e3wvp1ja/

no errors

[asasass]

Deleting: just this class
<div class="containerc"></div>

From the html

What does that tell you?
https://jsfiddle.net/ohxcrtvj/

Now all the javascript is working.

I don’t know if .containerc can work being in the html.

It breaks the javascript.

I don’t know if there is a way to resolve that.