Slideshow won't advance when there is a video - 1.0.1.2

[user0474975]

Hi Ian,

I've got an older version of Sequence for which the documentation is no longer available.

I've been trying to get it working with embedded YouTube videos (an ongoing thing for us). The slideshow animates until it gets to a slide with a video, and then it stops. This is regardless of whether or not the video is interacted with (clicked). I checked and double-checked and I believe I've got the CSS all in order.

The embedded video is contained in a DIV just under the LI element. The div has a class of video. Here is my CSS code.

sequence .video {

display: table-cell;
height: 340px;
opacity: 0;
margin: 0px;
padding: 0px;
text-align: center;
top: 5%;
width: 100%;
z-index: 10;
transition-property: opacity;
transition-duration: 1s;

}

sequence .animate-in .video

{
opacity: 1;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-ms-transition-duration: 1s;
-o-transition-duration: 1s;
transition-duration: 1s;
transition-property: opacity;
}

sequence .animate-out .video

{
opacity: 0;
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-ms-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
transition-duration: 0.5s;
transition-property: opacity;
}

And the slide's HTML:

Okay, it won't let me post HTML without parsing it, even though I clicked on the code button - but I'd be glad to send it to you in an email if needed.

Please let me know if you see anything amiss in my CSS.

Thanks!!

[IanLunn]

V1 documentation here.

Do you have a link or the HTML? I suspect the video (the animated element) is not a top-level element which was a requirement for v1.

[user0474975]

Hi Ian,

Thanks for the link to the documentation. I’ll save it this time ☺

You were right, of coursehttps://en.wikipedia.org/wiki/Rubber_duck_debugging. When I’ve been trying to get the video to work, I paid so much attention to the video element that I neglected to notice that when I didn’t add a link to the slide, a different element became “top-tier” and that one wasn’t animated. I noticed this while I was putting together the code to send you!

I’ve attached the complete (generated) HTML code from my browser for the slider. The last two slides are the video – the first one is the non-working one and when I replace it with the second one, it works as far as the slide animations.

I wonder if you might know the answer to the next question. When the user clicks the video to play it, the slideshow stops (correctly). However, when the video is paused, or stopped, the slideshow does not resume. (It does resume when the video ends naturally). Is it possible to do this or will the user have to click on the slideshow’s play button manually?

Thanks!

[IanLunn]

I believe it would be possible to make the slideshow resume when the video is paused using the YouTube API. In my opinion though, and from a user experience point of view, it probably shouldn't. A user's action should result in one event. Having the video pause button also unpause the slideshow feels like a contradiction and may lead to confusion.