Embedded content shrinks to 150px height when resized

  • spsmw

    (@spsmw)


    12 years, 5 months ago

    I’m using the less framework and media queries to modify my css based on browser width. (I’m using the four default width sizes of full browser, tablet, wide mobile, and mobile.) Everything is working perfectly except for embedded content.

    At the widest size, all of my iframes/javascript embeds (such as YouTube embeds and Wufoo forms) look perfect. Initially, these embeds stayed their full width even when the rest of the page shrunk, so I set the width to 100% of the div with

    iframe { width: 100%; height: auto; }

    This makes the width work right for all my embeds, but the height, instead of adjusting correctly, goes to 150px, no matter what. So at my tablet width, my YouTube video is 416 x 150, and then at the mobile width it’s 252 x 150, etc. With YouTube, the video shrinks to fit in the box with black background on the sides; with form content it just hides the overflow.

    No matter what I try, I can’t set the height to automatically fix itself. What am I doing wrong?

    (This is true in both Firefox and Chrome. IE8 doesn’t support the media queries anyway.)

Viewing 1 replies (of 1 total)
  • Thread Starter spsmw

    (@spsmw)

    12 years, 2 months ago

    If it helps anyone, the code that worked for me is wrapping my embed code in a div called .videoWrapper:

    .videoWrapper {
		position: relative;
		padding-bottom: 56.25%; /* 16:9 */
		padding-top: 25px;
		height: 0;
}
.videoWrapper iframe {
		position: absolute;
		top: 0;
		left: 0;
}

    Then in the media query to resize my screen, put

    .videoWrapper iframe {width: 100%; height: 100%;}

Viewing 1 replies (of 1 total)
  • The topic ‘Embedded content shrinks to 150px height when resized’ is closed to new replies.