nadermx nadermx - 1 month ago 20
CSS Question

Setting height of iframe via media queries

I'm trying to have this embed load a iframe of 200px and for mobile screens load a height of 140px.

<!DOCTYPE html>
<html>
<style type="text/css">
@media only screen and (max-device-width: 480px) {
.iframe {
height:140px;
}
}
</style>

<body style="margin:0px">

<iframe width="100%" height="200" src="https://www.youtube.com/embed/FtveSk1N7Uo?enablejsapi=1&origin=http://domain.com&autoplay=1" frameborder="0" allowfullscreen></iframe>

</body>
</html>


This isn't working though

Answer

It's not working because inline styles (height="200" on the iframe) take precedence over any other styles. Also, your selector won't match your markup - it should be iframe (the element) not .iframe (a class).

Try taking the height=200 off of the iframe, and putting it before your media query in your styles:

iframe {
  height: 200px;
}

@media only screen and (max-device-width: 480px) {
  iframe {
    height:140px;
  }

}

On a side note, it's generally better to use max-width instead of max-device-width. The former will apply your small styles to a small laptop or desktop browser window; the latter won't.