Youtube Background Video

YouTube Backgrounds

Play a muted, looping YouTube video as a full-cover section background. Canvas uses a YTPlayer integration that reads the video URL and playback options from data attributes, then sizes the player to fill its containment element.

Core Markup

Add a .yt-bg-player element (with customjs when you want the theme to initialise it) and point data-video at any YouTube URL:

<div class="video-wrap">
    <div class="yt-bg-player customjs"
         data-quality="hd1080"
         data-start="15"
         data-stop="45"
         data-video="https://youtu.be/LXb3EKWsInQ"></div>
    <div class="video-overlay" style="background: rgba(0,0,0,0.4);"></div>
</div>

Key Attributes

• data-video: the YouTube URL (required). Accepts youtu.be/ID or full watch URLs.
• data-mute: true (default) or false. Autoplay requires muted.
• data-ratio: aspect ratio. Default: 16/9.
• data-quality: playback quality such as hd720 (default) or hd1080.
• data-opacity: player opacity, 0 to 1. Default: 1.
• data-container: containment selector. Default: parent (the plugin auto-assigns an id to the parent).
• data-loop: true (default) or false.
• data-volume: volume 0 to 100. Default: 50.
• data-start: start time in seconds. Default: 0.
• data-stop: stop time in seconds. Default: 0 (play to end).
• data-autoplay: true (default) or false.
• data-controls: show player controls, false by default.
• data-optimize: optimise display sizing, true by default.
• data-coverimage: a fallback cover image URL.
• data-pauseonblur: pause when the tab loses focus, true by default.
• data-playifvisible: only play while visible, false by default.

Trimmed Loop Example

Loop just a segment of a longer video by combining data-start and data-stop:

<div class="yt-bg-player customjs"
     data-quality="hd1080"
     data-start="19"
     data-volume="80"
     data-stop="52"
     data-video="https://youtu.be/G5eaRMifvPQ"></div>

In a Slider

YouTube backgrounds work inside Canvas swiper slides. The slider plays the active slide's YouTube player automatically:

<div class="swiper-slide dark">
    <div class="video-wrap">
        <div class="yt-bg-player customjs" data-quality="hd1080"
             data-start="15" data-stop="45"
             data-video="https://youtu.be/LXb3EKWsInQ"></div>
    </div>
</div>

Tips

• Always add a .video-overlay tint so overlaid text stays readable.
• Use data-start and data-stop to loop the most visually interesting segment.
• Leave data-mute="true" (the default) so autoplay is not blocked by browsers.
• Set data-coverimage for a smooth fallback while the YouTube player initialises.