Youtube embedded video sizing

  • Resolved Andy53711

    (@andy53711)


    4 years, 6 months ago

    When I add an embed code for a YouTube video into my site, it shows up correctly sized in the visual editor. However, when I preview the site or save it, the video becomes the full width of the screen — too large for what I want.

    Any advice on how to fix that?

    The embed code I’m using is:
    <iframe src="https://www.youtube.com/embed/7UbrKmGdabU?modestbranding=1" width="560" height="315" frameborder="0"></iframe>

    Thanks!

    • This topic was modified 4 years, 6 months ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Everything else WordPress topic

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

Viewing 3 replies - 1 through 3 (of 3 total)
  • corrinarusso

    (@corrinarusso)

    4 years, 6 months ago

    It’s bc you have this in your style sheet:

    .fluid-width-video-wrapper {
 width: 100%;
 position: relative;
 padding: 0;
}                                                                                   .fluid-width-video-wrapper iframe, .fluid-width-video-wrapper object, .fluid-width-video-wrapper embed {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}

    See screenshot:
    https://postimg.cc/QHwpSvBx

    Remove the CSS above.
    And add this as well:

    .fluid-width-video-wrapper {
    display: inline-block!important;
    padding: 0!important;
    margin: 0!important;
    width: 100%!important;
    padding-top: 32.25%!important;
}

    See screenshot:
    https://postimg.cc/1nb9b0D6

    Thread Starter Andy53711

    (@andy53711)

    4 years, 6 months ago

    Thank you, Corrina!

    I wasn’t able to find that text in style.css. I’m not sure where that text (.fluid-width-video-wrapper, etc.) is located.

    However, by adding the code you recommended to custom css — and I switched the width to 50% — it produced the result I wanted. I really appreciate your help!

    Andy

    corrinarusso

    (@corrinarusso)

    4 years, 6 months ago

    Lol, right – sorry, my mistake re the 100%.

    Glad it worked out.

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

The topic ‘Youtube embedded video sizing’ is closed to new replies.