slider transition between video and picture is jiggy

Hi Victoria
thanks for the example
in order to use it with enfold i need to give my video a custom css class which is not possible since it’s inside a slide of a full screen slider
but.. maybe i can still make it work if I know it’s current class
can you help me with that?

of course I’ve enabled the custom class field
but it gives me option to set a class to the whole full screen slider, not to each slide
anyway..i think.. instead of slider with mixed content (pictures and video) may be I should simply try putting one long video as a color section background
so.. if there isn’t an easy solution, you can close the ticket
sorry for all the hassle

great! it works!!
but there are couple of glitches
1. caption only appear in the second slide (although it’s configured be on first slide with the video as well)
2. when the slider reaches the last slide it stops (although it’s configured to loop)
is there a way to fix it?

Hi
I will upgrade to 4.2 as soon as possible
here is the css code i used (i took it from https://codepen.io/gerbata/pen/jBaggE as Victoria suggested)

 /* home page slider video fade out*/ 

@keyframes fade-in {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fade-in { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fade-in { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fade-in { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}​
@keyframes fade-out {
    from {
        opacity:1;
    }
    to {
        opacity:0;
    }
}
@-moz-keyframes fade-out { /* Firefox */
    from {
        opacity:1;
    }
    to {
        opacity:0;
    }
}
@-webkit-keyframes fade-out { /* Safari and Chrome */
    from {
        opacity:1;
    }
    to {
        opacity:0;
    }
}
@-o-keyframes fade-out { /* Opera */
    from {
        opacity:1;
    }
    to {
        opacity: 0;
    }
}

.avia-slideshow li:nth-child(1) {
	opacity: 1;

    -moz-animation: fade-out 3s ease-in forwards; /* Firefox */
    -webkit-animation: fade-out 3s ease-in forwards; /* Safari and Chrome */
    -o-animation: fade-out 3s ease-in forwards; /* Opera */
    animation: fade-out 3s ease-in forwards;
    -moz-animation-delay: 17s;
    -webkit-animation-delay: 17s;
    -o-animation-delay: 17s;
    animation-delay: 17s;
	}
}

Hi
sorry it took me so much time to respond
1. updated WordPress and Enfold to the latest version
2. removed the extra curly brace

now we have 3 problems instead of 2:
1. caption still appear only in the second slide (although it’s configured be on first slide with the video as well)
2. when the slider reaches the last slide it stops (although it’s configured to loop)
3. the worst one – video isn’t full screen anymore!
instead there is a huge black frame and the video is shrinked the the right side of the screen
please take a look at the screen shot and/or the link in the private contenet

please help me fix it (at least let’s fix issue number 3..)

the caption appearing only in the second slide is tolerable
but the slider getting stuck on the last slide – that’s a bummer
..may be it’s because the slider reaches the first slide again and it’s waiting for the video to finish but .avia-slideshow li:nth-child(1) is now in opacity o instead of 1 so it’s not working ?
is there a way to reset the opacity of the slide and may be it wont stuck the slider from looping?
or maybe there isn’t and so maybe i should give up about the video fading thing?