Buttons / Pause Video

Description of component:

ClickUp Ticket

How to use this component

This is useful if the video is a background componenet without controls avaible

Note: You can also use the js from the pause all videos component.

Component Example

Code Snippets

HTML

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

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

JS

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

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 Video' );
            $('#js--video').get(0).pause();

        } else {

            $(this).attr( 'aria-checked', 'false' );
            $(this).html( 'Pause Video' );
            $('#js--video').get(0).play();

        }

    });

}