Twenty Seventeen: Issue with Header Video

[anonymized_7324279]

via ​https://wordpress.org/support/topic/issue-with-the-header-video/#post-8665585

Upgrade of the theme and the WP (4.7.1) messed up the header video.

Now there’s a big black bar at the top and bottom (wasn’t there in the previous version(s)).

I've checked on a variety of browsers (all updated to the newest versions):

firefox

safari

chrome

[davidakennedy]

@tentblogger Thanks for the report, and welcome to Trac!

A few questions for you:

1. Does this occur if you use an older version of the theme – 1.0?
2. Are you using an uploaded video or YouTube one?
3. What happens if you remove and add the video back?
4. Do you have this live on a site somewhere I can look at?

I have a hunch that this may be due to the content width changes made on the 1.1 version of Twenty Seventeen. See: r39635.

The content width had to be changed because it was flat out wrong, so it made sense to make such a big change.

[anonymized_7324279]

Nope. Was working fine with the initial release.
YouTube.
I've tried different videos and formats. Same result.
​http://john.do

[ohkevmanaol]

Uh...is anything being done about this?

[davidakennedy]

Sorry I haven't doubled back to this sooner.

I investigated a bit more this morning, and haven't made much progress:

• I tested on an older version of the theme, so I don't think r39635 is the culprit.
• This only seems to happen with YouTube embeds.
• YouTube seems to set a fixed with and height on its <video> element. I think this could be part of the problem.

I plan to investigate some more this weekend.

Pinging @joemcgill and @bradyvercher for help and ideas.

[bradyvercher]

YouTube does resize the video element within the iframe to ensure it always fits within the screen, but I wasn't able to replicate the behavior in those screenshots. #39893 might be related and has some code I wrote to make YouTube video headers full screen.

[davidakennedy]

@bradyvercher Thanks for chiming in! I was able to replicate what was in the screenshots using his video and another one.

I did notice the resize thing with YouTube, and that seems to be the primary cause of this. So #39893 is definitely related.

[swissspidy]

#40378 was marked as a duplicate.

[here]

Possibly related to #40522

[ianbelanger]

Unfortunately there still does not seem to be a good solution for this. I am going to close out this ticket in favor of #39893 as it is the same issue and there is more relevant discussion on that ticket.