Trigger content from a video - CSS Tutorial

- [Instructor] Hi, this is Chris Converse, and in this episode we'll show and hide content in our webpage based on the current time of a video playing on our page. So if you'd like to follow along with me download the exercise files and let's begin by opening the HTML file in the text editor. So once you have the HTML file open you'll notice that all of the content in the browser is piled on top of each other. What's going on here is we have this series of aside elements with an ID on each one. So this one has an ID of content welcome, then content coffee, content baked goods. Each one of these asides is absolute positioned on top of each other. And so what we're going to do is show and hide these based on the current time of the video. So the first thing we'll do is go back to the exercise files. Let's open style dot CSS in our text editor. Let's scroll down. Let's find the rule that's targeting the sides inside of the article. Let's come in here and add an opacity setting. We'll set this to zero. And to animate those transitions we'll use a transition property. So I'll type transition colon space. Opacity. Space one S for one second. Then we'll save our work. Now we'll go back to the exercise files. Let's reopen the index dot HTML file. Let's scroll down to the bottom. I have a script element in place here with a comment. Let's come in here and remove the comment. And the first thing we'll do is set up a couple of variables. So the first variable is going to be one called current time. So current underscore time. We're going to set this equal to zero. Next, let's set a variable that's going to target the video itself. So var space my underscore video. We're going to set this equal to document dot get element by ID. Then inside of the parentheses we will look for the ID about video. And if I scroll up here in the HTML you'll see that the video at the top here has an ID called about video. Scroll back down. And semi colon. Also going to widen my text area here just a little bit. And now next, we'll create another variable that will be the variable for the content container. Which has all of the welcome content. So var space. We'll use a C underscore for content. Then welcome. We're going to set this equal to document dot get element by ID. Inside of the parentheses two tick marks for a string. Content underscore welcome. And then a semi colon at the end. Let's duplicate this three more times. Then, for the second content variable we're going to name this C underscore coffee. And then for the get element by ID inside of the parentheses we're going to look for content underscore coffee. For the third item we'll name this C underscore baked. Then for the ID we're going to look for content underscore baked. Underscore goods. And then for the last content variable we're going to name this C underscore promise. And then for the ID we're going to look for content underscore promise. And so now with our variables created now we're going to create a function that's going to reset the opacity of all of these items. So on the next line, we'll type function. And a space. We'll name this reset underscore opacity. Open our parentheses, put in our curly brackets. Let's split this open on the brackets. I'm going to scroll up here a little bit so we can see more code. And now inside of the function we're going to set the opacity per every one of those items. So we'll start with C underscore welcome dot style dot opacity. We're going to set this equal to zero. Put in our semi colon. Let's duplicate this. Let's make the second item C underscore coffee. Let's make the third item C underscore baked. And then the last one C underscore promise. I'll close up the extra space in the function. Next, we're going to set a listener event. So in the next line we'll type my underscore video dot add event listener. With a capital E. And then listener with a capital L. And then our parentheses then a semi colon. So we're adding an event listener to the my video object. Now inside of the parenthesis the first parameter we're going to set is going to be time update. So inside of the string we'll type in time update, all one word. And then before the ending parentheses we're going to add an anonymous function. So we'll type function. Put on our parentheses. Put in our brackets. Inside of the parentheses, we'll put in E to capture the event. Then we'll split this open on the curly brackets. Inside, we're going to update our variable of current time. So I'll scroll up here a little bit. Current time was the first variable we declared up here. So let's copy that. We're bringing that down here. And we're going to set current time equal to my video object dot current time. And in Javascript that's current. And then time, with a capital T I-M-E. Then a semi colon. Now still inside of our function we're going to run some conditional statements to check where the current timeline is. So the first condition we'll type if. Put in our parentheses in brackets. Split this open. Inside of the parentheses we're going to check to see if current time is less than 8.75 seconds. If it is, what we're going to do is reset the opacity and then set the opacity of the welcome content. So I'll come up here and copy the reset opacity function name. Then down here inside of my condition let's paste that. Put in our parentheses and a semi colon. This will set the opacity to zero for all of the content elements. And then on the next line we'll target C underscore welcome. Dot style. Dot opacity. And we'll set this equal to one. So now with the first condition created let's come in here and copy this. Hit a few returns. Let's paste this again. Next, we'll check to see if the current time is greater than 8.75. If it is we're going to come in here and set the C underscore coffee element to an opacity of one. Let's scroll down. Let's copy this again. Next, we'll check to see if the current time is greater than 22.4 seconds. If it is, we'll come down here and set the style of opacity to one for the baked element. So C underscore baked. Let's come in here and copy this again. Next, we'll check to see if the current time is greater than 29.2 seconds. If it is, we'll set the opacity on the element of C underscore promise. And then to reset this back to the welcome screen let's come in here and copy this one more time. And if the current time is greater than 45 seconds, we're going to come in here and set the C underscore welcome back to an opacity of one. And now that our script's complete let's save our HTML. Let's go back out to our browser. And now when we play the video we'll see that the video timeline will then trigger the content over on the right hand side of the screen. (gentle music) And so with that, I'll conclude this episode. And as always, thanks for watching. (gentle music)