2017 Theme Banner Issue on Phone only

Hi @timtyson, I know you’re having this same conversation on another forum but it’s best that you create 1 thread per topic.

It is intention that the video does not appear on certain resolutions. The criteria for which the video appears is a width of ‘900px’ and a height of ‘500px’. These settings come from core:
https://developer.www.ads-software.com/reference/functions/get_header_video_settings/

I’m sure you can override these, but I just want to make it clear that this is not a bug.

Thanks, Andrew. Sorry about 2 threads. The other moderator suggested this is where I should post my question. I’m really new to all of this.

The recommended size indicated on the screen for the Customize > Header Media > Header Video is 2,000 x 1,200. So, I customized my video upload to 2,000 x 1,200. And the phone settings are 900 x 500. So, is this an either/or case? Either the video works on tablets and computers or it works on the phone? Or will a 900 x 500 resolution video upload also work on a computer, tablet, and phone? (Probably look pixelated on large monitor, fullscreen sizes.)

• This reply was modified 7 years, 11 months ago by timtyson.

Your phone is 900px wide and 500px tall? I’m getting a bit confused. To clarify there are server settings that will prevent the video from showing on devices smaller than 900px width and 500px height.

I’m not sure of my phone’s screen size: iPhone 6s+. It easily plays 4k videos I’ve uploaded on my server–scaling the video down to fit on the screen. It’s one of the larger phones.

The video I uploaded in the theme is not even 4k (It’s the recommended 2,000 x 1,200), and it will not play in the banner on the phone. I would think it should scale down and play.

I’ve noticed another person has tried this with a video pulled off of a YouTube URL and is having the same issues: it will not play on the phone. Only the default 2017 image shows up in the banner. And, it’s not just that way on my phone.

It’s as if the phone “template” (Sorry, I don’t know the correct terminology.) will not play videos at all–just a still image, and then only the one still image that is the default image for the 2017 theme.

I hope I’m making sense. And I sincerely appreciate your helping me understand this.

The quality of the video or the device’s ability to play 4k videos is not part of the criteria. The criteria is only 900px wide and 500px tall.

I do understand the issue you are facing, but this is the behaviour of the theme – that is derived from WordPress core.

I just want to get this conveyed properly before guiding you to a solution.

OK. I understand: 2000 x 1200 for the banner on computers and tablets, and 900 x 500 for phones as per the WP core. I think I get that.*

So, what is the solution for getting a 900 x 500 video up and playing on the phone banner while keeping the 2000 x 1200 video working on desktops and tablets?

_____
*Admittedly, I know NOTHING! about php and the WP core. It all fascinates me, along with people with the brain power to figure it all out, but I know NOTHING about it. But, if I may be curious: why does the php code in the code reference link you sent me say:

‘minWidth’ => 900,
‘minHeight’ => 500,

minimum and greater than or equal to: Would that mean anything greater would work? Again, if my question is insane or the answer far more complicated, just pretend I didn’t ask. Not meant to frustrate, I’m just sticking my toe into the deep side of the pool.

You’re not frustrating me or anyone who’s providing support.

why does the php code in the code reference link you sent me say:

‘minWidth’ => 900,
‘minHeight’ => 500,

minimum and greater than or equal to: Would that mean anything greater would work?

Yes, this is an assumption I’ve made too. I tested it by resizing my browser to 900px and 499px size and the video didn’t play. So it looks like the minWidth and minHeight settings are the values responsible for this issue. Edit: Then I tested it at a 900px and 500px size and the video played.

I’ll look into the solution now.

• This reply was modified 7 years, 11 months ago by Andrew Nevins.
• This reply was modified 7 years, 11 months ago by Andrew Nevins.

Do you have a Child Theme set up?

I just understood that the 900 x 500 min size is not the video file but the browser window! Ok. Yeah, the phone browser size is probably not 900 x 500 even if the video file is larger.

Setting up a child theme now.

Child theme ready.

Try this. I don’t know if it’ll work.
Assuming you have created your Child Theme functions.php file, add this code inbetween the <?php and ?> tags:

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

[Code updated]

Edit: Code updated.

• This reply was modified 7 years, 11 months ago by Andrew Nevins.
• This reply was modified 7 years, 11 months ago by Andrew Nevins.
• This reply was modified 7 years, 11 months ago by Andrew Nevins.
• This reply was modified 7 years, 11 months ago by Andrew Nevins.
• This reply was modified 7 years, 11 months ago by Andrew Nevins.

Sorry I did some copy and paste fails with the code, but it has been corrected now.

OK. So, I’ve murder my site:

Parse error: syntax error, unexpected ‘}’ in /home/timtyson/public_html/PenceWatch.US/wp4MP/wp-content/themes/twentyseventeen-child/functions.php on line 37

I even deleted the code, put the functions.php back exactly as it was before and still get the same error message.

It has risen from the dead. I had to edit the file via an ftp editor and not the WP editor. Trying to fix the error on line 37–think it’s one too many “}”

Nope. It didn’t fix it. Page wouldn’t load at all with the removed “}”. Hung up. Took out all of the added code and it works again–like it used to. Same video issue.

• This reply was modified 7 years, 11 months ago by timtyson.