Video Backgrounds

Video Backgrounds

Video backgrounds play a muted, looping HTML5 video behind section content for an immersive hero. Canvas wraps the video in .video-wrap and sizes it to cover the container, keeping the aspect ratio and centering the video regardless of section dimensions.

Core Markup

<div class="video-wrap">
    <video poster="images/videos/deskwork.jpg" preload="auto" loop autoplay muted playsinline>
        <source src="images/videos/deskwork.mp4" type="video/mp4">
        <source src="images/videos/deskwork.webm" type="video/webm">
    </video>
    <div class="video-overlay" style="background-color: rgba(0,0,0,0.3);"></div>
</div>

The plugin automatically ensures the video is muted, playsinline, and webkit-playsinline so autoplay works on mobile browsers.

Aspect Ratio

Set the source video ratio with data-ratio on the .video-wrap (defaults to 16/9). This is used to compute cover sizing on browsers that lack object-fit: cover.

<div class="video-wrap" data-ratio="16/9">
    <video preload="auto" loop autoplay muted playsinline>
        <source src="images/videos/clip.mp4" type="video/mp4">
    </video>
</div>

Dark Overlay

A .video-overlay layer over the video improves text contrast. Set any RGBA colour:

<div class="video-overlay" style="background-color: rgba(0,0,0,0.4);"></div>

Mobile Placeholder

On mobile, playing video can be costly. By default, if the device is mobile and the video has a poster (or data-poster), the plugin swaps in a static .video-placeholder background image and pauses the video. To force the video to always play and skip the placeholder, add no-placeholder to the wrap:

<div class="video-wrap no-placeholder">
    <video poster="images/videos/deskwork.jpg" preload="auto" loop autoplay muted playsinline>
        <source src="images/videos/deskwork.mp4" type="video/mp4">
    </video>
    <div class="video-overlay" style="background-color: rgba(0,0,0,0.3);"></div>
</div>

Reduced Motion

The plugin respects prefers-reduced-motion. Visitors with reduced motion enabled get the video paused automatically.

Tips

• Always provide a poster image. It shows before the video loads and serves as the mobile placeholder.
• Provide both mp4 and webm sources for the widest browser support.
• Keep background videos short (10 to 30 seconds) and silent, and always add a .video-overlay if text sits on top.
• Use no-placeholder sparingly since forcing video on mobile increases data usage.