WordPress No sound in header youtube video on Frontpage

the video is controlled with the file /wp-includes/js/wp-custom-header.js

for customize them in your theme you need overwrite this file.

  1. Copy this file to your assets, from the root of your website write cp wp-includes/js/wp-custom-header.js wp-content/themes/[Your Theme]/assets/js/wp-custom-header.js
  2. register the new file in [Your Theme]/functions.php adding this code add_action( ‘wp_enqueue_scripts’, ‘register_header_script’ ); function register_header_script() { wp_deregister_script( ‘wp-custom-header’); wp_register_script( ‘wp-custom-header’, get_theme_file_uri(‘/assets/js/wp-custom-header.js’), array( ‘jquery-masonry’ ), false, 1 ); }
  3. Now we can control the video in many ways, to turn on the sound in our file wp-custom-header.js search and delete the line e.target.mute(); (line 390 in wordpress 4.9.8 or line 394 in WordPress 5.5.1)

before

            handler.player = new YT.Player( video, {
            height: this.settings.height,
            width: this.settings.width,
            videoId: this.settings.videoUrl.match( VIDEO_ID_REGEX )[1],
            events: {
                onReady: function( e ) {
                    e.target.mute();
                    handler.showControls();
                }, ...

after

        handler.player = new YT.Player( video, {
            height: this.settings.height,
            width: this.settings.width,
            videoId: this.settings.videoUrl.match( VIDEO_ID_REGEX )[1],
            events: {
                onReady: function() {
                    // e.target.mute();
                    handler.showControls();
                }, ...

Exist many other header’s video functionalities than you can customize in this file.

Enjoy !

Leave a Comment