How do I have videos fade in on the screen instead of popping up?

[htmlcssjavascript28]

Click the first 2 exit buttons you see on the screen: Edit fiddle - JSFiddle - Code Playground

Where you are taken to this screen:



When you get to there, instead of the videos just popping up, how do you have them fade in?

 

[tomliv]

Click the first 2 exit buttons you see on the screen: Edit fiddle - JSFiddle - Code Playground

Where you are taken to this screen:

View attachment 2539

When you get to there, instead of the videos just popping up, how do you have them fade in?

I see the video sliding in from the top. Is that what you are calling 'popping up'?

 

[htmlcssjavascript28]

Try this one: Edit fiddle - JSFiddle - Code Playground

Click the first 2 exit buttons,

I am trying to have those videos fade in.

 

[tomliv]

Try this one: Edit fiddle - JSFiddle - Code Playground

Click the first 2 exit buttons,

I am trying to have those videos fade in.

View attachment 2541

OK, I'm not 100% sure I am seeing what you see (browser/OS), but anyway, could you use an intersectionObserver to trigger a fadein after x amount of time?

 

[htmlcssjavascript28]

What do you see?

 

[tomliv]

What do you see?

I see a container slide in, the videos do kinda fade on to the screen and there is an overlay of lines that eventually slides up. Mac Firefox.

CleanShot 2024-03-07 at 14.08.47

Video uploaded to CleanShot Cloud

cln.sh

 

[htmlcssjavascript28]

Here is an example code: Edit fiddle - JSFiddle - Code Playground

How would you fade that youtube video in using transition?

<div class="wrap hide">
          <div class="video video-frame"></div>
        </div>

 

[tomliv]

Here is an example code: Edit fiddle - JSFiddle - Code Playground

How would you fade that youtube video in using transition?

<div class="wrap hide">
          <div class="video video-frame"></div>
        </div>

.wrap .hide{
    opacity: 0;
}
.wrap{
    opacity: 1;
    transition: opacity 0.3s ease;
}

With script, at the desired time, you would remove the .hide class.

You could toggle pointer-events but with the overlay of lines you have, you may already be blocking interaction until it slides out.