Adding 2 Videos With 2 Curtains

HTML & CSS
21

Doing that, should I expect to see a difference when viewing the code?

Would something be noticeable?

Would there be a visual difference?

/*.inner-container {
  display: none;
} */
22

Yes the element would sit in between the blue and red buttons and although it may not notice it will still be there and may interfere if you have more buttons.

1 Like
23

What did I do wrong?

.container.active {
  flex: 1 0 0;
  animation: fadebody 5s ease 0s forwards;
  background-size: 165px 165px;
  background-image: linear-gradient(teal 5px, #0000 5px),
}

.playb.container.active  {
    background-size: 165px 165px;
    background-image: linear-gradient(red 5px, #0000 5px),
    linear-gradient(90deg, red 5px, #0000 5px),
}
24

Did you add the playb class in the HTML?

No need to duplicate anything except the background image property.

Is the css in the right order in the style sheet ?

1 Like
25

Like this:?


.container.active {
  flex: 1 0 0;
  animation: fadebody 5s ease 0s forwards;
  background-size: 165px 165px;
  background-image: linear-gradient(teal 5px, #0000 5px),
    linear-gradient(90deg, teal 5px, #0000 5px),
    linear-gradient(black 10px, #0000 10px 160px, black 160px),
    linear-gradient(90deg, black 10px, #0000 10px 160px, black 160px),
    linear-gradient(orange 15px, #0000 15px 155px, orange 155px),
    linear-gradient(90deg, orange 15px, #0000 15px 155px, orange 155px),
}

.playb.container.active::before {
  background-image: linear-gradient(red 5px, #0000 5px),
    linear-gradient(90deg, red 5px, #0000 5px),
    linear-gradient(black 10px, #0000 10px 160px, black 160px),
    linear-gradient(90deg, black 10px, #0000 10px 160px, black 160px),
    linear-gradient(orange 15px, #0000 15px 155px, orange 155px),
    linear-gradient(90deg, orange 15px, #0000 15px 155px, orange 155px),
}
26

Where did the :before appear from ?

27

I added it in because, I thought it would be which turns out to be the wrong thing to do.

Here’s a jsfiddle I can work on.
https://jsfiddle.net/85pohrqm/1/

28

What am I doing wrong?
https://jsfiddle.net/ozge1pn8/1/

.container.active {
  flex: 1 0 0;
  animation: fadebody 5s ease 0s forwards;
  background-size: 165px 165px;
  background-image: linear-gradient(teal 5px, #0000 5px),
    linear-gradient(90deg, teal 5px, #0000 5px),
    linear-gradient(black 10px, #0000 10px 160px, black 160px),
    linear-gradient(90deg, black 10px, #0000 10px 160px, black 160px),
}

.playb .container.active {
  background-size: 165px 165px;
  background-image: linear-gradient(red 5px, #0000 5px),
    linear-gradient(90deg, red 5px, #0000 5px),
    linear-gradient(black 10px, #0000 10px 160px, black 160px),
    linear-gradient(90deg, black 10px, #0000 10px 160px, black 160px),

}
29

Is the space between .playb and .container meant to be there?

(I’ve no idea what the issue is that you’re trying to address, so I can’t be more helpful than that.)

1 Like
30

Using 2 backgrounds, one for each video.

I tried this also.

.playb.container.active

31

Just to be sure (as the fiddle doesn’t show on my mobile ) where are you adding the new class?

It should be on the same element as .container.

<div class=“container newclass”>

33

You might be able to see this:

Still confused.
I’m still doing it wrong.

You can make edits to it.
https://jsitor.com/CDPgzU8s8

backup copy.
https://jsfiddle.net/ozge1pn8/1/

34

You don’t seem to be doing anything that I told you still?

You haven’t added a new class to the container and you haven’t used the new class to show the image all as previously shown!


.newclass.container.active{}

<div class=“container newclass”>
1 Like
35

Like this?

This way doesn’t work.


playa.container.active {
  flex: 1 0 0;
  animation: fadebody 5s ease 0s forwards;
  background-size: 165px 165px;
  background-image: linear-gradient(teal 5px, #0000 5px),
    linear-gradient(90deg, teal 5px, #0000 5px),


.container. .playb {
  background-image: linear-gradient(red 5px, #0000 5px),
    linear-gradient(90deg, red 5px, #0000 5px),
}
36

You are confusing the instruction for the HTML with the instruction for the CSS.

Look carefully at where and how Paul told you to add the new class for each.

1 Like
37

This works, but how is the duplicate removed?
https://jsitor.com/CDPgzU8s8

html
<div class="container .playb with-curtain">

.container.active {
  flex: 1 0 0;
  animation: fadebody 5s ease 0s forwards;
  background-size: 165px 165px;
  background-image: linear-gradient(teal 5px, #0000 5px),
}

.container.active {
  background-image: linear-gradient(red 5px, #0000 5px),
    linear-gradient(90deg, red 5px, #0000 5px),
38

Really? That’s showing the same background image for both the blue and red buttons, and you said you didn’t want that.

In CSS, if you have two rules for the same thing (in this case .container.active) then whichever comes later in the CSS will be applied (in this case the red background).

If you want both to display the same background image, simply replace the background-image code in the first rule with that from the second rule, and remove the second rule.

If you want them to be different, then look again at Paul’s instructions.

1 Like
39

Red button gives me teal

Blue button gives me red

https://jsitor.com/CDPgzU8s8

I swear it was just working before.

I don’t know what happened.

40

That’s strange, because both buttons give me red, which is what I’d expect from that code.

41

I don’t know what happened, now I’m seeing red for both.

I don’t know what the right combination should be.