Version 1.3.0
The SPM Responsive Media Carousel creates one consistent, cinematic presentation system for still images and decorative MP4 backgrounds, preserving a fluid 16:9 frame, readable layered captions, and predictable slide behavior across screen sizes.
Release Highlights
One Fluid 16:9 Stage
Images and video share the same responsive frame without abrupt height changes at device breakpoints.
Controlled Background Video
Decorative MP4s play only while active, then pause and reset when the carousel advances.
New Features
Responsive 16:9 Media Frame
The carousel uses a fluid 16:9 presentation that scales continuously with its container. Images and MP4 backgrounds occupy the same visual stage, avoiding fixed-height jumps as visitors move between desktop, tablet, and mobile layouts.
Image and MP4 Slide Support
The final carousel supports two focused media types: still images and self-hosted MP4 backgrounds. Both follow the same slide dimensions, transitions, caption system, indicators, and timing.
Three-Tier Caption System
Each slide can present an eyebrow label, primary heading, and supporting description. The three levels preserve a clear reading order while scaling down for smaller screens.
Eight-Second Slide Interval
Slides advance on an eight-second interval, providing enough time to recognize the visual and read its caption without leaving the presentation motionless for too long.
Fade Transitions and Caption Animation
Bootstrap's fade transition softens movement between slides, while Animate.css effects can replay when a caption's slide becomes active again.
Decorative MP4 Behavior
Plays Only on the Active Slide
When an MP4 slide becomes active, its video is allowed to begin from the start. Inactive slide videos do not continue playing unnoticed in the background.
Muted, Inline Background Presentation
MP4s are treated as visual backgrounds rather than standalone video players. They are muted, play inline, and do not display playback controls or interrupt the slide's caption hierarchy.
Pause, Reset, and Restart
When the carousel leaves an MP4 slide, that video pauses and returns to its beginning. If the visitor reaches the slide again, the visual starts over instead of resuming halfway through.
Independent Carousel Timing
The carousel's normal rotation continues independently of video duration. An MP4 does not hold the slide open until the clip finishes or take control of navigation timing.
Intentional Scope
The initial universal-carousel concept explored additional embedded media. The production direction was deliberately narrowed to images and MP4 backgrounds.
YouTube, Vimeo, iframes, and social-media embeds are not part of this component. Removing those integrations keeps the carousel focused, avoids external player APIs, and gives SPM consistent control over appearance, timing, and transitions.
Technical Foundation
Modular Three-File Architecture
The component was delivered as spm-responsive-carousel.html, spm-responsive-carousel.css, and spm-responsive-carousel.js, separating page structure, visual presentation, and media lifecycle behavior.
Lightweight Dependencies
The carousel builds on Bootstrap 5.3 and Animate.css with purpose-built JavaScript. It does not require jQuery, TweenMax, embedded-player libraries, or external video APIs.
Accessible Carousel Identity
The carousel carries an accessible label identifying it as Scott Price Media featured content. Individual images retain meaningful alternative text supplied by the page author.
Completion Record
The final responsive HTML, CSS, and JavaScript component was delivered on August 25, 2026. The approved implementation established the 16:9 layout, three-tier captions, eight-second Bootstrap fade cycle, image support, and controlled decorative-MP4 behavior described in this release.
Known Limitations
MP4 video is decorative
The carousel does not provide video controls, sound, long-form playback, or completion-based timing. Content requiring active viewing or audio belongs in a dedicated media player rather than this background presentation system.
Automatic playback remains browser-controlled
Muted inline video is designed to work with common browser autoplay policies, but a browser, device setting, reduced-data mode, or power-saving feature may still decline or delay playback. The carousel can continue advancing even when a decorative video does not start.
Media files require responsible preparation
Large MP4s can consume substantial bandwidth and delay the first usable frame. Videos should be compressed appropriately and include a suitable poster image when practical. Images should also be sized for their intended display instead of relying on the browser to reduce oversized source files.
Only images and self-hosted MP4s are supported
YouTube, Vimeo, iframe content, and social-media embeds are intentionally excluded. They require different controls, privacy considerations, loading behavior, and failure handling than this focused carousel provides.