Site scrolls on mobile, except when you touch over a video in iframe

Hello!

Responsively designed site – http://cinemaregent.com/now-showing.html

When viewing on mobile, it all works fine except if you go to scroll and you touch your finger over a video, it doesn’t move. I’ve checked on youtube to see if it does there and it does. Is there something I need to tell my iframe in CSS so that it will work?

Many thank you’s
greg

Hi,

I think its the fact that when you touch the iframe the device will be attempting to scroll inside the iframe rather than the parent page. You would need to touch outside the iframe to scroll the page I believe.

Do you have a link to a page where you see this working in the way that you want and then we can compare what they have done?

Thanks very much PaulOB,

If you just go to youtube.com.au on a mobile, you can see you can scroll up and down the page irrespective of whether your finger is over a video or not. Could be because on youtube the videos aren’t inside iframes.

Yes, looking at youtube it looks like their videos are inside a Span, not an iframe. Hmmm. Must be a solution though. Set the iframe to overflow:hidden? I’ll try that…

Nope, that doesnt change anything. Any other ideas?

Greg

Try removing scrolling="no" from the iframe code:

<iframe 
    allowfullscreen="" 
    frameborder="0" 
    [color=red]scrolling="no"[/color] 
    src="http://www.youtube.com/embed/zqRL2dY5-us">
</iframe>

Thanks Ralph,

No that didn’t change anything. Hmmm. Now the Coming Soon page won’t scroll at all, even if your finger is over a

or header. But I can’t see that the code for coming soon is any different from the Now Showing code.

O well, it was worth a shot. I tested an embedded vid on my own site and it scrolls fine on mobile, unlike on your page. I can’t see any CSS that’s getting in the way, so maybe there’s some JS getting in the way?

thanks Ralph,

I dont think I’ve used javascript on this site. Must be some other reason. Thanks for your time.

greg

greg, I just tried your page with an Android phone and it scrolled as expected. What kind of mobile are you using?

I see the behavior he’s describing on my iPhone. I’ve tried remote debugging, but can’t find a single CSS property that seems to be causing it. However, on a similar test page on my own site, a YouTube vieo scrolls fine on the same device. :-/

iphone 4

Yes there is no iframe on that page so the issue won’t arise.

The youtube page doesn’t use iframes but loads a video after clicking a link. If you have embedded videos then there would be no problem but as you have an iframe then the device must manage the iframe first and prepare to scroll any content inside.

Iframes will always hijack the scroll mechanism because otherwise you wont be able to scroll in the iframe.

If you can show a site that uses iframes to display videos and is still able to scroll then perhaps we can look for a solution but I think this is just the way that iframes need to work and may be difficult to overcome.

Note that some devices will handle this differently anyway and the iphone used to use two finger scrolling to scroll iframes or overflow boxes but I believe the newer versions will do it with one finger.

thanks Paul,

you’d think setting the iframe contents to overflow:hidden would fix this as there would be effectively no content to scroll to. but it doesnt seem to work adding overflow:hidden to the css for iframe.

thanks,
greg

As I said above, I see the problem on iPhone4 with your video, where you can’t scroll when touching the embedded YouTube video. Weirdly, though, I can scroll the page in the same situation on my own site. Here’s an example. On that page, the video is set to position: absolute within a relatively positioned container with bottom padding. (That’s for responsive resizing reasons.) I thought maybe that was the difference, but testing this on your page (as far as I could) it still didn’t seem to make a difference. Still, might just be because I’m trying to do it remotely.

thanks Ralph,

Unfortunately I cant put the video within a div (and absolutely position it in there) because this is also a CMS site and the cinema owners update their coming soon and now showing with the new trailers. I could do it that way, but it adds another thing that could go wrong by the client interfering along the way. Man, webdesign is hard sometimes!!
g

Try putting the iframe inside a div that has overflow:hidden set as in Ralphs example.

If that doesn’t work then use the same method as Ralphs and absolutely place the iframe to fit the div using the 16:9 ratio method.

(edit - oops I missed your last content but I don’t see how this will make a difference to managing the site as its just another container)