YouTube Video in wordpress site – scaling with black bars – maybe a quick fix?

  • Unknown's avatar

    Hey,

    I am working on a site for a client, I have a YouTube Video which is at the top of the page. The video looks great when the width of the browser is at max but when I begin to scale the browser width the video appears to have black bars on top and bottom. The video is 1920 x 700 so it doe’nst actually have any black bars in the video. I have also tried a video which is 1920×1080 and I get the same problem.

    There is no additional padding or classes set on the video that I can see in this post.

    Any ideas? This has been driving me nuts.

    <a href="https://ibb.co/qkcCrbX"><img src="https://i.ibb.co/cDZwrzM/Reduced-Width.png" alt="Reduced-Width" border="0"></a>
    <a href="https://ibb.co/D48c6MH"><img src="https://i.ibb.co/Px9XbWv/Reduced-Width-Full.png" alt="Reduced-Width-Full" border="0"></a>
    <a href="https://ibb.co/jLzTF1B"><img src="https://i.ibb.co/qRCdwPX/Screenshot-2021-01-28-at-17-29-11.png" alt="Screenshot-2021-01-28-at-17-29-11" border="0"></a><br /><a target='_blank' href='https://geojsonlint.com/'>json to map online</a><br />
  • Hi, is the site hosted here on our servers? Can you send a link? I ask because the setup here is fairly different from a self-hosted WordPress site:

    WordPress.com vs. WordPress.org

    If you’re using a self-hosted copy of WordPress, you’ll want to use this instead:
    https://wordpress.org/support/forums/

    Generally speaking, though, the video embeds are going to be in an iframe that doesn’t have a simple way to scale proportionally. If you’ll look into “preserve aspect ratio iframe embed” you might find some ideas about the problem and potential solutions.

  • The topic ‘YouTube Video in wordpress site – scaling with black bars – maybe a quick fix?’ is closed to new replies.