-2

I am currently building a site at www.georound.com and when you click on the pin on the map an infoWindow pops up with a video embedded inside using an iframe. My problem is these videos look great on desktop but once I try and open the page on mobile the iframe is too big and doesnt resize for mobile, the infoWindow itself does resize and looks good on mobile.

I have tried changing the css for the iframe but every time I make it smaller for mobile it gets smaller on desktop too!!

When I open the infoWindow on mobile with the phone turned sideways, the display is ok too. Its just when the screen is small that the iframe doesnt resize correctly.

Any help is appreciated, thanks.

shane247
  • 1
  • I think this is a duplicate of this post http://stackoverflow.com/questions/17838607/making-an-iframe-responsive – sebasaenz Dec 19 '16 at 01:00
  • I tried a few of the css changes on the link above but when I do it within an iframes alone it works but if I then put that iframes in an infoWindow, nothing shows up!!! You can see what I mean at www.georound.com the video at the bottom is in an iframe and resizes for each device but theven video within the infoWindows uses the same code and comes up blank??? – shane247 Dec 19 '16 at 02:11
  • It seems like position: absolute; is giving the trouble with the infoWindow. Just shows up as blank. – shane247 Dec 19 '16 at 02:28

1 Answers1

0

You need to use @media in your css to define at what size screen you want certain CSS rules to apply.

For example:

@media (max-width: 600px) {
 iframe {
   width: 50vw;
 }
}
David Bradshaw
  • 11,859
  • 3
  • 41
  • 70