WordPress.org

Make WordPress Core

Opened 16 months ago

Last modified 5 months ago

#39893 new defect (bug)

Header Media: YouTube Embed Does Not Fill Screen

Reported by: cingrosso Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 4.7.2
Component: Customize Keywords:
Focuses: 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 (8)

#1 @SergeyBiryukov
16 months 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
16 months 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
16 months 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
16 months ago

Brilliant Brady, well done!

Works a treat....

Thanks

#5 in reply to: ↑ 2 @metalfurydesign
8 months 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
8 months 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
8 months 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 months 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.

Note: See TracTickets for help on using tickets.