[Plugin: Viper's Video Quicktags] FLV video gets squished or cut off

My plugin adds some CSS that tells the browser to make the video no wider than the containing object it’s in (to avoid overflowing into sidebars and whatnot). In this case, one of the parent div‘s has the class headway-leaf which has a width of 250 pixels, so the browser resizes it from 400 pixels wide to only 250 pixels wide.

The solution is to make the container wider so that a wider video can fit inside of it.

Can you please tell me where you see the width of the div as being 250? I have it set for 400px. I looked at the page source code but could not find a specified width for the div headway-leaf. Thanks!

You have the video width set to 400, but that is being ignored since the container’s width is only 250 pixels.

Here’s the HTML in question: https://wordpress.pastebin.com/6bGqCHPY (I added the second highlighted line to point to the specific div and CSS class)

You then have this CSS in your stylesheet:

.headway-leaf {
    float: left;
    width: 250px;
    margin: 5px;
    padding: 10px 10px 0;
    overflow: hidden;
    min-height: 110px; }

That leaves you with a narrow column for your content.

It’s likely cut in half in Chrome because Chrome is ignoring the CSS saying don’t make the video wider than the container so it makes it the full 400 pixels wide. However the container also has overflow: hidden; meaning any content that overflows outside of the container gets hidden (i.e. the right side of the video).