Make WordPress Core

Opened 6 years ago

Last modified 7 weeks ago

#39893 new defect (bug)

Twenty Seventeen Header Media: YouTube Embed Does Not Fill Screen

Reported by: cingrosso's profile cingrosso Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 4.7.2
Component: Bundled Theme Keywords: dev-feedback
Focuses: javascript Cc:

Description

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

Change History (14)

#1 @SergeyBiryukov
6 years ago

  • Component changed from Media to Bundled Theme
  • Summary changed from 2017 Theme: Full Screen Video Header to Twenty Seventeen: Full Screen Video Header

#2 follow-ups: @bradyvercher
6 years ago

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.

#3 in reply to: ↑ 2 @cingrosso
6 years ago

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.

#4 @cingrosso
6 years ago

Brilliant Brady, well done!

Works a treat....

Thanks

#5 in reply to: ↑ 2 @metalfurydesign
6 years ago

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.

#6 follow-up: @bradyvercher
6 years ago

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.

#7 in reply to: ↑ 6 @metalfurydesign
6 years ago

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.

#8 @davidakennedy
5 years ago

  • Component changed from Bundled Theme to Customize
  • Summary changed from Twenty Seventeen: Full Screen Video Header to Header Media: YouTube Embed Does Not Fill Screen

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.

#9 @domainsupport
5 years ago

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

#10 @domainsupport
5 years ago

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

#11 @here
4 years ago

Possibly related to #40522

#12 @ianbelanger
3 years ago

#39616 was marked as a duplicate.

#13 @ianbelanger
3 years ago

  • Component changed from Customize to Bundled Theme
  • Focuses javascript added
  • Keywords dev-feedback added

#14 @poena
7 weeks ago

  • Summary changed from Header Media: YouTube Embed Does Not Fill Screen to Twenty Seventeen Header Media: YouTube Embed Does Not Fill Screen
Note: See TracTickets for help on using tickets.