How can I unmute (and turn off autoplay) a YouTube video for twentyseventeen?

Question

I have a lecture on YouTube that I would like to use as the header movie for my twentyseventeen child themed website. I would like it with sound and without autoplay (As viewed on YouTube, the video has sound intact).

Following another question about autoplay, I set a video URL of https://www.youtube.com/watch?v=1dYAYBNU6qM&autoplay=0. The behavior does not appear to have changed. It starts immediately, but sound is muted.

How, with twentyseventeen, do I have an option of a media file that starts paused, and begins to play, with sound, if the user hits the 'Play' button?

Answer 1

You can use global object wp for get access to youtube player functions. Youtube video in twentyseventeen theme loads wp-custom-header.js file and creating new object in 384 line.

Here is some solution you can use:

var ww_timer = setTimeout(function ww_video() {
    if(wp.customHeader.handlers.youtube.player == null){
        ww_timer = setTimeout(ww_video, 50);
    }else {
        if(typeof wp.customHeader.handlers.youtube.player.unMute === "function") {
            wp.customHeader.handlers.youtube.player.unMute();
            wp.customHeader.handlers.youtube.player.stopVideo();
        }else{
            ww_timer = setTimeout(ww_video, 50);
        }
    }
}, 50);

This code goes to my_js.js file( I created it in the main directory of active child theme. You can add this code to another .js, if you have it ) of your active child theme. Also, we need to update functions.php file using this code:

function ww_youtube_functions(){
  wp_enqueue_script('ww_youtube_video',get_stylesheet_directory_uri().'/my_js.js',array('wp-custom-header'),false, true);
}
add_action('wp_enqueue_scripts', 'ww_youtube_functions');

Required part of this code is array('wp-custom-header'): enqueue script with dependence with script wp-custom-header.

setTimeout is not best way. I believe, that it can be done with more elegant code.

But its tested and working.