video displaying less than specified width

  • Heimhenge

    (@heimhenge)


    3 years, 10 months ago

    I don’t know how long this has been happening, but I just noticed it today. The MP4 video at the top of this post is 700 px wide. So is the graphic a few paragraphs below it. But as you can see, the video doesn’t display the full width like the graphic does.

    If I switch the editor to TEXT the video size shows as 700 x 396 (which is what I want). This happens with all MP4 videos and animations embedded in my posts.

    Tried disabling all plugins. No joy.
    Tried a different browser. No joy.

    Curiously, the video appears at the correct size when viewed on a tablet or smartphone, but not on a desktop or TV.

    I’m stumped. Suggestions most appreciated, thanks.

    • This topic was modified 3 years, 10 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 4 replies - 1 through 4 (of 4 total)
  • George Appiah

    (@gappiah)

    3 years, 10 months ago

    This is not a plugin conflict or browser issue.

    The container in which the video is embedded has an inline style with a fixed width of 660px, forcing everything within it to this 660px width. (You can click the image below to see a larger one.)

    Thread Starter Heimhenge

    (@heimhenge)

    3 years, 10 months ago

    Thanks. I can see what’s happening. Didn’t think to inspect the underlying HTML. No idea why WP would fix the container size at 660px. I assume there is no “switch” in any of the WP setting that could change that. Not sure that can be solved with CSS either. Will probably need to edit some PHP file in my child theme. What do you think?

    George Appiah

    (@gappiah)

    3 years, 10 months ago

    First, note that this issue only exists with videos inserted with the Classic Editor. Videos inserted with the Video Block in the new block-based editor (aka Gutenberg) don’t inject any such inline styles.

    Try this CSS:

    #mep_0, .wp-video {
width: 700px !important;
}

    (You can change the width value to 100% if you want it to align with the text.)

    Thread Starter Heimhenge

    (@heimhenge)

    3 years, 10 months ago

    Thanks for your quick and accurate response. Worked perfectly!

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

The topic ‘video displaying less than specified width’ is closed to new replies.