kpiraro

This is a huge help, @Sahil! Thanks so much for taking the time. I think the two .play() methods, in normal javascript and GSAP, were a particular sticking point; I didn't know about javascript .play() and thought I could just use GSAP .play() to trigger the video. And the querySelector is obviously important too. Thanks again!

Thanks so much, @Sahil! I knew there was some piece of the puzzle I wasn't getting. Could I ask you to explain one point about WHY this works? I see you added another variable, "vd," that grabs the class of the video element with querySelector. That variable is used in addition to the "video" variable I declared with the video element itself. So in the playVideo function, it looks like you add "video" to the vtl timeline, but use the .play() method on "vd." Can you explain why that works? What's the difference between assigning variables to the whole video element vs. the video class, and why do we need both for that function?

Hi there, I've been struggling with this for a while now and finally decided to submit this to the forum. I've read a number of posts that make this seem easy, but I'm obviously missing something. I'm trying to simply add an HTML video element to a timeline so I can control when it starts to play and coordinate it with my other banner elements. In this simple example, I want to control how long I see a black screen with the intro text before I fade that black background and text away and start the video. (The Pen I've posted here is a much shortened version, btw, for simplicity.) I have tried a number of configurations of .play() and .add with a callback function, but it just doesn't seem to work. The only reason the video plays in the Pen I have now is that I have autoplay set in the HTML attributes in the video element. If I remove that attribute from the video element, the rest of my timeline plays over a blank box. Is there something I'm missing with how to configure a video element and add it to a simple timeline? Thanks so much for any insight you can give me!