Problem with header video on mobile

I’m confused as why Even is not responding? This is the second time I have asked this question. Am I asking wrong? I paid for the theme, so I’m confused as to why I am not getting support. Thank you

Hi @snakelyone

The themes hosted here on www.ads-software.com are free – and there is no charge to use them. Anyone, including GoDaddy customers, can download and use them, free of charge.

With that being said, we are using core WordPress functionality. Namely the_custom_header_markup (Source: https://github.com/godaddy/wp-primer-theme/blob/develop/inc/hooks.php#L48, Codex: https://developer.www.ads-software.com/reference/functions/the_custom_header_markup/)

If you dig deep enough into WordPress core, you’ll find that there is a check in place to determine if the current environment supports videos.

https://github.com/WordPress/WordPress/blob/master/wp-includes/js/wp-custom-header.js#L83

The settings.minWidth value defaults to 900. Because the windows inner width is less than the default minWidth value that line returns true and thus supportsVideo check returns false.

You can filter the minWidth value and set it to 0, so that the video always renders. You will first want to create an MU plugin. To do so, you can follow the tutorial we have setup in the Primer documentation.

https://godaddy.github.io/wp-primer-theme/tutorials-and-examples/tutorials/mu-plugin.html

Once you have that setup, you’ll want to add the following PHP snippet to the file:

// Enable video header support on mobile devices
add_filter( 'header_video_settings', function( $args ) {

	$args['minWidth'] = 0;

	return $args;

} );

That should trigger the videos to play on all devices, regardless of their window size.

Let me know if that helps.

Evan

thank you!
I’ll give it a try…I appreciate your guidance.

Hi Evan,

I did what you said (at least I think!) and the video shows up, but there is a red “play arrow” in the middle of the screen and in the line above it says the following — can you tell what I did wrong? it still does not show up on a phone, but we really just want it on the ipad — thank you, blake

// Enable video header support on mobile devices
add_filter( ‘header_video_settings’, function( $args ) {

$args[‘minWidth’] = 0;

return $args;

} );

sorry, sent too soon — obviously I pasted the code in the wrong place? as I assume that is why the code you told me to paste is showing on the page…any assistance would be great. Thank you

I also tried to put it in the body and in the head, neither worked

And then I used text wrangler to repeat the process outlined in the how to create a must use plugin do it again (no dreamweaver php this time, as there is a lot of extra info in the file) but no luck. Still seeing the code on the top of the page (on desktop and tablet, but the phone remains the static image — but now it has the line of code on top as well)…I have told the client this will be resolved shortly, so I do hope that you can offer some troubleshooting suggestions

You had it correct the first time. The video will show up but will not auto play on mobile devices. As far as I know mobile devices don’t support auto play. You can write some JavaScript to play the video on page load, but beyond that I’m not sure if a way to auto play the video on mobile.

Evan

the video won’t play (the button is not active, just static and it does nothing), and also the code is still on the top of the page?

and at this point is not letting me log in to my admin page when the code string is at the top…do you not see that? instead, when i go to https://warnerpoint.net/wp-admin/
there is no login option — instead just a blank page with the code snippet

to be clear, every time I attempted to create the php file, the site has had the code across the top of the page. Do you see it?

Hi Evan, I am still having the problem with the code at the top of the page — it has been there since I first started (so i never had it “right”)…can you please advise? I would be super grateful, thank you

Hi Evan,

Okay, I managed to get rid of the code, but the youtube link remains un-clickable — the red arrow is there, but the video does not play. In other words, the mobile header is a screenshot of the opening image of the video, and the red arrow does nothing.

I have been hunting around for what is happening to no effect. I cannot seem to find anyone with this problem.

This is the youtube url: https://www.youtube.com/watch?v=Lj2Y8Rmlbq0

@snakelyone

I’m not sure why that code is showing up in your header. That should not be happening. My guess is you’ve not included an opening <?php tag at the top of wherever you’ve added that code snippet.

As for the video not being clickable, that’s due to the header wrapper element being on top of that youtube player, the logo and other elements are receiving the click. If you check the markup you’ll see that the logo and other elements are “on top” of the video player in z space.

This goes a bit beyond the scope of free support, and more into the realm of custom development, but to make things a bit easier you should be able to just trigger the video to play, using some Javascript, on mobile devices by adding the following code to your MU plugin.

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' );

Ideally, you would add that snippet to a JavaScript file and enqueue it properly, but if you are not familiar with that process the above snippet will do just fine.

Hi Evan, Yes, you were right, I was missing the opening PHP code…and I did figure that out on my own…however, I fear I am not pasting your code in correctly, because autoplay is not happening. (I have also read in my research that youtube videos with sound will never auto play…I’m working on gaining access to the video itself, but in the meantime, can you see if I am missing anything in this code:

<?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’ );

@snakelyone

I can’t tell if the code that you’ve provided in the response above contains invalid single quotes or if that’s just the way that www.ads-software.com forums parsed the code.

You will want to highlight your code and then click on the ‘code’ button in the text editor toolbar. This will wrap your code in backticks and format it properly.

It looks like your code above uses ‘ and ’ instead of just single quotes '. You can try updating your code to ensure single quotes are used. I’ve copied the code you provided and updated those quotes and things do appear to be working on my end.

Evan