media querie not working on newly added pages

[theremotedr]

Hi,
I have now added 5 new pages to my site.
Each page has a video in it.
Here is a page to inspect.
http://www.theremotedoctor.co.uk/video_accord.html?scrollto=selection

The issue i have is that the media querie on the page is not working when viewed on the iphone/ipad.
All the icons are to the left & small in size.
I have check all the other pages on the site and are fine.

Please could you advise where i made the error.
Basically i used a working page that was fine on the ios device and just popped a video into the page.

[theremotedr]

Checking this on the ipad is fine.
The issue is on the iphone.

If i alter the size of the image that you current see from 640 x 480 to a small size then it starts to look correct of the iphone but then it alters on the ipad.

I dont understand why the code already on the page does not work correctly,its the same for other pages and fine.
As a test removing the video and leaving the image at 640 x 480 ipad & iphone is fine.
As soon as the video is inserted the issue returns.
Does the media querie NOT resize the video ?