Creating Interactive HTML5 Video

Learn the basics of skeleton CSS, including setting up a container, building rows and 12-column grids, and defining responsive column widths with class-based layouts, to start creating layouts.

Build a basic HTML5 video page by creating a container and a video area with two clickable overlays. Enhance the video with controls, autoplay, and multiple sources.

Style the video layout with CSS on the body and headings, set a background color, remove margins, and size the video to 100 percent width with auto height.

Learn to build a video description area in HTML and CSS, with a title, description, and live current time and duration counters, styled with white background and padding.

Learn to stylize clickable boxes over a video by applying relative and absolute positioning, rgba transparency, and a cursor pointer, enabling interactive hotspots without obstructing the video.

Discover featherlight js for lightbox content by hiding HTML blocks and revealing them in an overlay; use data attributes for triggers and consider MVC separation of model, view, and controller.

Create featherlight content outside the main container, wrap it in a persona pop-up with image, name, role, bio, and experiences; hide it with a lightbox class for later featherlight reveal.

Learn to implement click events with jQuery to trigger featherlight popups on clickable areas, pause the video when a popup opens, and prepare a reusable function for playback control.

Create a single play/pause function for an html5 video that toggles play state and shows a featherlight popup, using parameters to reuse code with multiple click events.

Configure featherlight to run a function after close, so closing the lightbox automatically plays or resumes the video via the playPauseVideo function, while adjusting image placement with float styling.

Create an interactive HTML5 video experience by implementing a lightbox question popup that appears at a chosen moment, with two long, full-width button choices for how to respond.

Set up variables to track video progress, such as halfway point, duration, and current time, and define good and bad choice jump points to control when questions appear.

Record a practical approach to handling variables in a choice-based HTML5 video, keeping values as seconds (seven and twenty) for now and planning later formatting updates.

Learn to handle video loaded data and time update events in HTML5 video, compute the halfway point from duration, and trigger actions with current time checks and console logs.

Trigger a timed choice in your HTML5 video by comparing the current time to a preset cue, pausing the video, and displaying a lightbox question.

Learn to trigger halfway and finished video events by comparing current time to the halfway threshold and duration, using alerts or analytics to track completion.

Set up click event handlers for choice buttons, trigger different functions for good and bad choices, and prepare to jump to a specific part of the video.

Learn to create interactive HTML5 video by jumping to specific times with button clicks, closing the featherlight window, and syncing current time to good or bad choices.

Implement a good choice flag and time checks to pause an HTML5 video when the good choice is selected, stopping at the 20-second mark and hiding controls to prevent skipping.

Update the time labels for an HTML5 video using jQuery to show current time and duration, format seconds into hh:mm:ss with a helper function, and refresh every second.

Recap shows how to make a video responsive, trigger questions at key moments, and let user choices branch playback while tapping faces reveals contextual info and updates labels in HTML.