Code (HTML, CSS, Script)

Slider Background Video

Go Back

Code (HTML, CSS, Script)

Challenge / Fix

Update Slider (do NOT include video)
Update Slides layout (if Video), add property "Video YouTube ID"

Updates Required

HTML

Default-List-BXSlide

CSS

t_tlc-styles.css

Scripts

Content

Requires Global Updates

Custom_Content

Requires Custom Updates per site

Fonts

Requires Custom Updates per site

Plug-Ins

Requires Custom Updates per site

HTML

Where to find HTML1 Code

Default-List-BXSlide

https://minarso.treepl.co/admin/snippets/31232

HTML1

{% if this.VideoYouTubeId != '' -%}
    {% assign YouTubeEDIT = this.VideoYouTubeId | split: '?' %}

<script src="https://www.youtube.com/iframe_api"></script>
        
        
        <script>
        // Variable to hold the YouTube player object
        var player;
        
        // YouTube Player API callback function
        function onYouTubeIframeAPIReady() {
            // Create a new YouTube player instance
            player = new YT.Player('video-container', {
                videoId: '{{YouTubeEDIT | first}}',
                playerVars: {
                    autoplay: 1,
                    controls: 0,
                    loop: 1,
                    mute: 1,
                    showinfo: 0,
                    rel: 0,
                    modestbranding: 0
                },
                events: {
                    'onReady': onPlayerReady,
                    'onStateChange': onPlayerStateChange
                }
            });
        }
        
        // Function to start the video when the player is ready
        function onPlayerReady(event) {
            event.target.playVideo();
        }
        
        // Function to restart the video when it ends (state=0)
        function onPlayerStateChange(event) {
            if (event.data === 0) {
                player.seekTo(0); // Restart the video
            }
        }
        </script>

{% elsif this.Video != '' -%}

<div class="bgHolder {{BgColorStyle}} cover {{BgImagePosition}} kenburns {{BgKenBurns}} {{BgParallax}}" style="background-image: url({{this.BgImage}}); background-color: {{BgColor}}; {% if BgImagePositionCustom != '' -%}background-position: {{BgImagePositionCustom}};{% endif -%} height: {{slideH}}; z-index: 0;" title="{{this.Caption}}">
    </div>
    
    <div class="embed-responsive embed-responsive-16by9 right50">
    
    {{this.Video}}
    
    </div>

{% else -%}

{% endif -%}

CSS

Where to find CSS Code

t_tlc-styles.css

CSS

Scripts

Script1

References

No References included