Twenty Seventeen Header Media: YouTube Embed Does Not Fill Screen

[cingrosso]

Hi.
I was really excited to see 2017 in action and thought a great deal of the video header feature, but my expectations were dashed when I realised that the promise of anamorphic images and videos automatically stretching to full screen in the header just did not materialise, despite using all the precautions, guidelines and recommendations suggested in the theme: 2000x1200 as per image, .mp4, etc. It seems that no matter what video link from YT I tried the image will stretch, but the video will not.
Is there a solution to this or is it just me?
You can see a brand new installation with no extra plugins, scripts or other potentially interfering code in the way, here: ​http://2ud.biz/dev/

Thanks in advance

[bradyvercher]

I've looked into this a bit and there isn't really a great solution. The iframe that contains the video is automatically stretched to fill the screen, but YouTube has a resize handler that adjusts the dimensions of the video so that it always fits the screen rather than fill the iframe as desired.

I did go ahead and ​put together a quick plugin that attempts to counteract YouTube's behavior by resizing the iframe to ensure the video always fills the container. I haven't done much testing with Twenty Seventeen and it only works with widescreen videos at the moment, but otherwise it should be pretty solid.

[cingrosso]

That's great Brady,

I'll take a look and test the plugin and report back.

Many thanks

Replying to bradyvercher:

I've looked into this a bit and there isn't really a great solution. The iframe that contains the video is automatically stretched to fill the screen, but YouTube has a resize handler that adjusts the dimensions of the video so that it always fits the screen rather than fill the iframe as desired.

I did go ahead and ​put together a quick plugin that attempts to counteract YouTube's behavior by resizing the iframe to ensure the video always fills the container. I haven't done much testing with Twenty Seventeen and it only works with widescreen videos at the moment, but otherwise it should be pretty solid.

[cingrosso]

Brilliant Brady, well done!

Works a treat....

Thanks

[metalfurydesign]

Hiya @bradyvercher

Thanks for the plugin. I was wondering if you or @cingrosso had any tips on how to implement it on the 2017 theme/Wordpress?

I've uploaded the plugin to the plugin folder and activated it.

I've also uploaded the .js file to a 'scripts' folder I've created.

Just not sure what to do next!

Thought maybe adding something like the following to the function.php file?

<script type="text/javascript" src="http://www.website.co.uk/scripts/custom-header-youtube.js"></script>

Any tips would be appreciated.

Replying to bradyvercher:

I've looked into this a bit and there isn't really a great solution. The iframe that contains the video is automatically stretched to fill the screen, but YouTube has a resize handler that adjusts the dimensions of the video so that it always fits the screen rather than fill the iframe as desired.

I did go ahead and ​put together a quick plugin that attempts to counteract YouTube's behavior by resizing the iframe to ensure the video always fills the container. I haven't done much testing with Twenty Seventeen and it only works with widescreen videos at the moment, but otherwise it should be pretty solid.

[bradyvercher]

Hi @metalfurydesign, you only need to install and activate the plugin and it should work with Twenty Seventeen automatically, so there's no need to configure anything.

[metalfurydesign]

Thanks for the reply @bradyvercher

I will give that another go.

Cheers :-)

Replying to bradyvercher:

Hi @metalfurydesign, you only need to install and activate the plugin and it should work with Twenty Seventeen automatically, so there's no need to configure anything.

[davidakennedy]

Thanks for the report @cingrosso! Welcome to WordPress Trac!

This seems like more of an issue with how YouTube embeds work. It would be great if we could find a solution that worked for all themes, not just Twenty Seventeen. Because I imagine this issue happens in any theme with the video header.

What do you think @joemcgill? For now, I changed the Component to Customize since this seems like something that if possible, should be addressed at a wider scale.

[domainsupport]

Hi @bradyvercher, can you please confirm that your plugin still works as described? We are not seeing the results and the black letterbox effect remains. Thanks, Oliver

[domainsupport]

Hi @bradyvercher, I saw that you said it wasn't working yet for the horizontal. I've edited your JS code slightly (you probably won't want to use jQuery but I'm sure you'll see what I've done) and it now works replacing ...

			} else {
				iframe.style.height = containerWidth * 9 / 16 + 'px';
				iframe.style.width = containerWidth + 'px';
			}

... with ...

			} else {
				iframe.style.height = containerWidth * 9 / 16 + 'px';
				var containingContainerHeight =  (containerWidth * 9 / 16) - jQuery('.navigation-top').height();
				jQuery('.admin-bar.twentyseventeen-front-page.has-header-video .custom-header-media').height(containingContainerHeight);
				jQuery('.has-header-image.twentyseventeen-front-page .custom-header, .has-header-video.twentyseventeen-front-page .custom-header').height(containingContainerHeight);
				iframe.style.width = containerWidth + 'px';
			}

Hope that helps.

Oliver

[here]

Possibly related to #40522

[ianbelanger]

#39616 was marked as a duplicate.

[poena]

Testing on WordPress 6.7.1, Chrome, MacOS. I am still able to reproduce this.

[domainsupport]

Because this issue is built into the way ​WordPress adds support for custom video headers I believe that this affects all themes that make use of custom video headers and to fix the issue, the JS that @bradyvercher created in his plugin should to be merged into /wp-includes/js/wp-custom-header.js (along with something similar to my suggestion to fix the issue when the aspect ratio is less than the container ratio).

As such the summary should probably be changed to "Custom Header: YouTube Embed Does Not Fill Screen" too seeing as this bug likely affects all themes that use custom video headers.