where can i add custom script to stop header video from autoplay

Question

How can I add the custom script from this answer to my site to stop the custom video header from autoplaying?

$( document ).ready( function() {
    $( document ).on( 'wp-custom-header-video-loaded', function() {
        $("#wp-custom-header-video").attr('autoplay',false);
    });
});

Answer 1

If you have your own theme or a child theme then you can add this in script tags to one of your templates. I'd suggest your footer template, just after the call to <?php wp_footer(); ?>

<script>
jQuery( document ).ready( function() {
    jQuery( document ).on( 'wp-custom-header-video-loaded', function() {
        jQuery("#wp-custom-header-video").attr('autoplay',false);
    });
});
</script>

Note that I've changed $ to jQuery since WordPress's jQuery is installed in no-conflict mode by default and does not define $.

Alternatively you can enqueue it as an inline script from a plugin or theme

function wp_custom_header_video_autoplay_false() {
    wp_add_inline_script( 'jquery', "<script>
jQuery( document ).ready( function() {
    jQuery( document ).on( 'wp-custom-header-video-loaded', function() {
        jQuery("#wp-custom-header-video").attr('autoplay',false);
    });
});
</script>
");
};
add_action( 'wp_enqueue_scripts', 'wp_custom_header_video_autoplay_false' );