How to set two different iframe heights in Jquery for Desktop and Mobile Devices?

Question

This is my iframe code

    <iframe src="http://myurl.com" opacity="0" scrolling="no" margin-top="10px" marginwidth="0" marginheight="0" align="middle" frameborder="0" width="100%" height="215px"></iframe>

I just want to use two different iframe heights for Desktop and Mobile Devices. For eg For Desktop Devices iframe height shoule be 215px For Mobile Devices (Android, Iphone, Ipad) iframe height shoule be 415px

How can i do this from Jquery ?

Answer 1

Set it with CSS and use CSS Media Queries to determine screen width and set styles according to that.

iframe { height: 300px }

@media only screen and (max-width: 800px) { 
  iframe { height: 500px }
}