Buttons / Pause All Videos

Description of component:

ClickUp Ticket

How to use this component

This button is recommended to be fixed in the nav or in position on the page for it to be accessible no matter the location of th scroll.

Component Example

Code Snippets

HTML

                
<button id="js--video-trigger" role="switch" aria-checked="false">Pause All Videos</button>

<video 
    style="width: 100%;" 
    id="video-1" 
    class="js--video" 
    src="https://contextcreative.dev.contextstaging.ca/wp-content/uploads/2020/09/CCWebsite_HeaderAnimation-NoText_bp01.mp4" 
    autoplay="" 
    loop="" 
    playsinline="" 
    muted="">
</video>

<video 
    style="width: 100%;" 
    id="video-2" 
    class="js--video" 
    src="https://ak.picdn.net/shutterstock/videos/1054729307/preview/stock-footage-aerial-view-of-the-sunsets-over-sea-beautiful-sea-waves-pink-sand-and-amazing-sea-summer-sunset.mp4" 
    autoplay="" 
    loop="" 
    playsinline="" 
    muted="">
</video>

<video 
    style="width: 100%;" 
    id="video-3" 
    class="js--video" 
    src="https://ak.picdn.net/shutterstock/videos/1060258418/preview/stock-footage-young-woman-in-orange-jacket-running-up-on-top-of-mountain-summit-at-sunset-raises-arms-into-air.mp4" 
    autoplay="" 
    loop="" 
    playsinline="" 
    muted="">
</video>
                
            

JS

                
var videoTrigger = document.getElementById('js--video-trigger');
var allVideos = document.querySelectorAll('.js--video');
var i;

if( videoTrigger ){

    $('#js--video-trigger').click(function(e){
        e.preventDefault();
        $(this).toggleClass( 'is-paused' );

        
        if( $(this).hasClass( 'is-paused' ) ) {

            $(this).attr( 'aria-checked', 'true' );
            $(this).html( 'Play All Videos' );

            for( i = 0; i < allVideos.length; i++ ) {
                var videoId = allVideos[i].getAttribute('id');
                $('#' + videoId).get(0).pause();
            }

        } else {

            $(this).attr( 'aria-checked', 'false' );
            $(this).html( 'Pause All Videos' );

            for( i = 0; i < allVideos.length; i++ ) {
                var videoId = allVideos[i].getAttribute('id');
                $('#' + videoId).get(0).play();
            }

        }

    });

}