Youtube header video to small

  • It seems every youtube video i try for the header is to small. In that when i add a youtube video it has black bars to the left and right as does not stretch across the screen. Any ideas?

    • This topic was modified 7 years, 11 months ago by gavpedz.
Viewing 4 replies - 1 through 4 (of 4 total)

  • How are you embedding the video? What is the width of the area you are embedding it into? What theme are you using? Does it do the same if you decrease the width or change themes?

    Thread Starter gavpedz

    (@gavpedz)

    There is no option to change size of video this is for twenty seventeen. You paste a url in the header media in customizer and thats it.

    I’m having the same problem; black bars on the sides of my landing page video using the Twenty Seventeen theme. I can’t figure out how to fix it, here’s what I tried:

    – I used HandBrake to reformat my video to 2000 pixels in width. I opted to maintain the aspect ratio which gave me 1126 pixel height. This video plays in the youtube player with full width of the screen.

    – I uploaded the video to youtube, then copied the URL that youtube gave me into the spot in the Twenty Seventeen theme where it says: paste youtube URL

    – I’m Still getting bars at the sides of my landing page. Note, the width of these bars is the same size as when I use a different youtube video that has 1200 pixel width.

    Having the same issue. It’s not WordPress CSS though it seems, as the issue is the YouTube video CSS, which is located in an iframe.

    Want to change:
    video { object-fit: contain; }
    to
    video { object-fit: cover; }

    Notoriously hard to override the CSS of an html document located in an iframe on WordPress. But found MAYBE a solution:

    https://stackoverflow.com/questions/6494721/css-override-body-style-for-content-in-iframe

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Youtube header video to small’ is closed to new replies.