WordPress.org

Make WordPress Core

Opened 9 months ago

Last modified 3 weeks ago

#39893 new defect (bug)

Twenty Seventeen: Full Screen Video Header

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

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

Brilliant Brady, well done!

Works a treat....

Thanks

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

Note: See TracTickets for help on using tickets.