Problem with header video on mobile

Hi Evan, Well, I’m pretty lousy at code (i’m a designer!) and on my text editor (i’m using text wrangler), it is single quotes, not standard type quotes…i have tried to “wrap” the code (but my text wrangler does not have a “code” button, so I did it online, but still no luck…I guess i am giving up? I wonder why it works for you but not for me? This is the last code I created, and when I test it online, it says it works….but not for me…when you are testing it, are you testing it with my video or a different one (perhaps one without sound, or perhaps one not on youtube)?

thank you
blake

<?php
/*
Plugin Name: my customizations – enable
video header on mobile
Description: code that is used always
Version: 1.0.0
Author URI: warnerpoint.net
*/
add_filter(‘header_video_settings’, function ($args) {
$args[‘minWidth’] = 0;
return $args;
});
function autoplay_youtube_header() {
ob_start(); ?>
jQuery( window ).on( ‘load’, function()
{

window.wp.customHeader.handlers.youtube.player.playVideo();
} );
<?php
$script = ob_get_clean();
wp_add_inline_script(‘wp-custom-header’, $script);
}
add_action(‘wp_enqueue_scripts’, ‘autoplay_youtube_header’);

Hi @snakelyone

The code button I was referring to was here on www.ads-software.com. The code that you are pasting is losing it’s formatting in your responses.

okay, i just did what you are asking, i highlight the code and selected “code” above — thank you for the clarification!

<?php
/*
Plugin Name: my customizations - enable
video header on mobile
Description: code that is used always
Version: 1.0.0
Author: B More Creations
Author URI: warnerpoint.net
*/
add_filter('header_video_settings', function ($args) {
    $args['minWidth'] = 0;
    return $args;
});
function autoplay_youtube_header() {
    ob_start(); ?>
jQuery( window ).on( 'load', function()
{

window.wp.customHeader.handlers.youtube.player.playVideo();
} );
<?php
    $script = ob_get_clean();
    wp_add_inline_script('wp-custom-header', $script);
}
add_action('wp_enqueue_scripts', 'autoplay_youtube_header');

I’ve checked your site and it looks like the script to autoplay the YouTube video isn’t loading when on mobile devices, on your site. But on my test site, it’s working as intended. I will have to test and see if I can reproduce the same issue.

@snakelyone

It looks like things are working properly now. I see things are auto playing on your site. Did you update anything? If not it’s possible it was just cache that needed to be cleared.

Although during my testing on your site, I did see that if your mobile device is rotated the video header doesn’t load. What you can do to work around that is to set a minHeight the same way we’ve set a minWidth in your code.

You can update the following:

add_filter( 'header_video_settings', function( $args ) {
    $args['minWidth'] = 0;
    return $args;
} );

to:

add_filter( 'header_video_settings', function( $args ) {
    $args['minWidth']  = 0;
    $args['minHeight'] = 0;
    return $args;
} );

which will load the video header even when the mobile device is rotated.

Let me know if things are also working on your end.

Epic! thank you — it works, it all works! I’m so grateful you stuck with me through all of my back and forth — you are amazing! Thank you thank you thank you! blake

@snakelyone

You are most welcome – that’s what we’re here for. I’m glad I was able to help you get that resolved.

I hope you have a great weekend!

You too!

Hi! I have the same problem with my videoheader using a youtube url link. I use the theme Hestia Pro. On desktop it works great but on mobile and tablet not at all.

I am at Bluehost and have there through the file manager access to the “wp-config.php” file.. do I need to copy and paste the above “simpy” there right in this file on my file manager at my Bluehost account?

Or do I need to create a new one?

Further informations are much appreciated!!

I’m having the same problem getting the video header to play on mobile on the Escapade theme.