Overview of Skeleton CSS | Learning Dojo

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

Overview of Skeleton CSS

Complete and Continue