Responsive mode wrong padding/black bars/aspect ratio

  • Resolved Marty

    (@bozzmedia)


    7 years, 7 months ago

    Great plugin, thank you!

    Implementing this plugin to responsively embed a youtube video on a 2 column page. The responsiveness seems to work however there are black bars on the top and bottom, indicating an aspect ratio/height issue.

    I noticed in the responsive code on the front end uses this:

    <div class="fluid-width-video-wrapper" style="padding-top: 50% !important;"></div>

    What I noticed after looking into this further is for 16:9 the padding-top needs to use

    padding-top: 56.2% !important

    In my testing this works perfectly, however I can’t override the inline style from the plugin default to accomplish this.

    1. Is there an element to the responsive setup I’m missing to always have the appropriate ratio size?

    2. Any way I can simply override the default inline css for this?

    Thanks for any insight you can provide, cheers!

    • This topic was modified 7 years, 7 months ago by Marty.

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author embedplus

    (@embedplus)

    7 years, 7 months ago

    You could enforce a 16:9 ratio by globally setting Default Dimensions in the YouTube Settings defaults tab. Pick something like 800×450. Responsive sizing will override the exact numbers you choose, but it will respect the ratio of those numbers.

    If you still see black bars after trying the above, then it’s because you’ve customized a specific height and width for the video back when you set it up in the wizard (because wizard customization settings for a video take precedence over global settings).

    -EmbedPlus Team

    Thread Starter Marty

    (@bozzmedia)

    7 years, 7 months ago

    Thanks for the reply and direction on this. Nice to know whatever I set the dimension to, the responsive sizing will still work but the ratio will stay intact. Great support, cheers!

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Responsive mode wrong padding/black bars/aspect ratio’ is closed to new replies.