Twenty Seventeen: Header pushing left

[jimwilcox]

i have not found a solution for this and i've been searching for a week. i have a video im using fro the header in the theme and its offf of youtube.. the dimensions are 1920x1080 but when add teh link it pushes the video to the left in the header and leaves a blank space on they right. EVERYONE else i see is working great. i checked my custom CSS fiend and made sure its blank. i removed ALL themes from the site that weren't wordpress built themes... i have no plugins that would cause any sort of theme customization... im lost here.

[laurelfulford]

Hi @jimwilcox -- thanks for reporting this issue!

Could you please share what browser and version you're seeing this issue in, and what operating system you're running (Windows, Apple OS...?).

Also, if the video you're using from YouTube is public, could you share a link, too? That could be helpful in trying to recreate this.

Thanks!

[jimwilcox]

Hey Laurel thanks for getting back to me. all of my computers / devices are running the latest of everything. I've checked this in Firefox and Chrome and everything is looking good there. only Safari is screwing things up for some random reason.
below are the specs on the 4 computers i've looked at it on.
thanks again
JIM

Mac os 10.14.1

Safari V. 12.1

link to video - ​https://youtu.be/dWkct5IQ2JQ

Replying to laurelfulford:

Hi @jimwilcox -- thanks for reporting this issue!

Could you please share what browser and version you're seeing this issue in, and what operating system you're running (Windows, Apple OS...?).

Also, if the video you're using from YouTube is public, could you share a link, too? That could be helpful in trying to recreate this.

Thanks!

[laurelfulford]

Thanks @jimwilcox -- that's a big help!

This sounds like a duplicate of #40522, so I'm going to close it in favour of the original issue.

In the meantime, these styles are kind of a modified version of the patch in #40522. If you copy and paste them into your Custom CSS field, it should knock the video back into place in Safari:

@supports ( object-fit: cover ) {
    body.has-header-video .custom-header-media iframe {
        -o-object-fit: fill  !important;
        object-fit: fill  !important;
    }
}

Can you please give that a try, and let me know how it goes?

[laurelfulford]

Hm, it looks like the CSS validation gets a bit grumpy about the @supports ( object-fit: cover ) bit -- stripping it out and just going with the following should have the same effect!

body.has-header-video .custom-header-media iframe {
   -o-object-fit: fill  !important;
    object-fit: fill  !important;
}

[jimwilcox]

they @laurelfulford that worked! thanks for the help!

[laurelfulford]

@jimwilcox Right on! :D Glad that did it -- thanks for letting me know!