Monday 12 July 2021

Stop a video when another one is clicked

I have two locally hosted videos on the same page. I am trying to stop one once another is clicked, but it does not work.

<div class="banner has-hover has-video is-full-height is-selected" id="banner-1353813713" style="position: absolute; left: 0%;">
    <div class="banner-inner fill">
    <div class="banner-bg fill">
    <div class="bg fill bg-fill "></div>

    <div class="video-overlay no-click fill visible"></div>
    <video class="video-bg fill visible" preload="" playsinline="" autoplay="" muted="" loop=""> <source src="https://www.exampledomain/video1.mp4" type="video/mp4"></video> </div>
    <div class="banner-layers container">
    <div class="fill banner-link"></div>            
    <div id="text-box-585511097" class="text-box banner-layer x10 md-x10 lg-x10 y35 md-y35 lg-y35 res-text">
    <div class="text-box-content text dark">
    <div class="text-inner text-center">
    <a href="/offers/" target="_self" class="button white is-outline is-large offersbutton hidden" style="border-radius:1px;">
    <span>View Video</span> </a>
    <a href="/offers/" target="_self" class="button white is-outline is-large offersbutton hidden" style="border-radius:1px;">
    <span>Offers</span></a>

    <div class="video-button-wrapper" style="font-size:70%"><a href="https://www.exampledomain/video2.mp4" class="button open-video icon circle is-outline is-xlarge"><i class="icon-play" style="font-size:1.5em;"></i></a></div>
        
        <p>Click to view full video</p>
        
                      </div>
                   </div>

I have tried listening to the classes onlick, but it has not worked:

<script>
        $(".video-bg fill visible").on("click", function() {
    
        // All but not this one - pause
        $(".video-bg fill visible").not( this ).each(function() {
             this.pause();
        });
    
        // Play this one
        // this.play();
    
        // Or rather toggle play / pause
        this[this.paused ? "play" : "pause"]();
    
    });
</script>
                        


from Stop a video when another one is clicked

No comments:

Post a Comment