WordPress.org

Make WordPress Core

Opened 3 years ago

Closed 3 years ago

Last modified 3 years ago

#45509 closed defect (bug) (duplicate)

Twenty Seventeen: Header pushing left

Reported by: jimwilcox Owned by:
Milestone: Priority: normal
Severity: major Version: 5.0
Component: Bundled Theme Keywords:
Focuses: Cc:

Description

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.

Change History (7)

#1 @SergeyBiryukov
3 years ago

  • Component changed from General to Bundled Theme
  • Summary changed from twenty seventeen header pushing left to Twenty Seventeen: Header pushing left

#2 follow-up: @laurelfulford
3 years ago

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!

#3 in reply to: ↑ 2 @jimwilcox
3 years ago

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!

#4 @laurelfulford
3 years ago

  • Milestone Awaiting Review deleted
  • Resolution set to duplicate
  • Status changed from new to closed

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?

#5 @laurelfulford
3 years ago

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;
}

#6 @jimwilcox
3 years ago

they @laurelfulford that worked! thanks for the help!

#7 @laurelfulford
3 years ago

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

Note: See TracTickets for help on using tickets.