Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Making HTML5 Video Interactive
Introduction
Introduction and Example (4:36)
Starter Files
Working with the Project Files (3:49)
Creating Your Video Page Layout
Overview of Skeleton CSS (4:16)
Basic Video Page Layout (9:55)
Stylizing Your Video Layout (4:59)
Creating the Video Description (6:16)
Stylizing the Clickable Boxes (9:50)
Overview of Featherlight JS (2:44)
Creating the Featherlight Areas (5:54)
Adding Interactivity to Your Video
Setting up Click Events on the Clickable Areas (5:43)
Play/Pause Video Function (9:13)
Running a Function After Lightbox Closes (4:24)
Creating the Users Choice (5:38)
Setting Up Some Variables (4:13)
Variable Fix (0:56)
Video Loaded and Time Update Functions (7:02)
Triggering the Choice in Your Video Timeline (4:34)
Halfway and Finished Video Events (3:55)
Choice Handling Event (3:28)
Jumping to a Certain Point in the Video (5:28)
Stopping the Video (4:06)
Updating the Time Labels (7:18)
Conclusion
Final Thoughts (3:49)
Finished Files for Review
Teach online with
Stylizing the Clickable Boxes
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock