CODEWITHSUNDEEP
javascriptiphonehtmlyoutubeyoutube-api
Chuck Norris
Chuck Norris

Reputation: 15190

Embedding youtube video has scrolling issues on iPhone

When I'm embedding youtube video in my mobile page, it brings a lot of scrolling issues in iPhone(I guess, it will same problems in other devices too). Users just can't scroll page when their tap on the video itself. Here is code I'm used for embedding

<iframe width="270" height="152" frameborder="0" src="http://www.youtube.com/embed/nBJCbUMHna4?rel=0"></iframe>

Can we solve this problem anyway? For example, can we show only thumbnail image of video and play it when user taps on that image. I think the scrolling problem will disappear when there will be image instead of iframe in the page.

I've tried to use html5 version of youtube video, but seems IPhone still renders video in flash way.

 <iframe width="270" height="152" frameborder="0" src="http://www.youtube.com/embed/nBJCbUMHna4?rel=0&html5=True"></iframe>

Upvotes: 4

Views: 5753

Answers (4)

user2019515
user2019515

Reputation: 4503

The below snippet appears to do the trick without any JavaScript trickery. At the same time this also ensures that you get the nice scrolling momentum on iOS.

*{
    -webkit-overflow-scrolling: touch;
}

Upvotes: 3

Alyssa Hope
Alyssa Hope

Reputation: 11

We are having this issue with Vimeo on our mobile site as well. It took us a while to even figure out that users were having the issue. One work around that we are checking out is to add a div layer on top of the video that allows users to scroll as normal and also acts as a custom play button that would distinguish between a scroll and a tap, or perhaps require a double tap to play the video. There is good step by step info on the general principal of how to do that here (https://css-tricks.com/play-button-youtube-and-vimeo-api/). I'd love to hear if others have found a better option to fix this.

Upvotes: 1

paradiz
paradiz

Reputation: 34

I've exactly the same issue on my site, this is not the case in the google blog. I precise that it doesn't scroll the iframe content, it scroll the safari's viewport.

I've try to replace the iframe by an img, no scrolling problem but the video now open in the youtube app...

I'm interested by a solution/workaround

for image solution

var frame = $('#youtubeFrame');
if ( mobileCheck )
{
    frame.replaceWith('<a href="http://www.youtube.com/watch?v='+youtubes[currentVideo]+'"><img id="imgYoutubeFrame"/></a>');
    $.getJSON("http://gdata.youtube.com/feeds/api/videos/"+youtubes[currentVideo]+"?v=2&alt=jsonc&callback=?", function(json){
       $("#imgYoutubeFrame").attr("src", json.data.thumbnail.hqDefault);
    });
}

Upvotes: 1

dutchguy
dutchguy

Reputation: 333

As far as i know you cant have scrolling iFrames on iOS devices
since the scrolling is done with a touch/sliding/gesture
it will scroll the whole page...ie: if you try to scroll
the contents in a iFrame it will scroll the whole page...so the iFrame
will move away with it.

So you could look more in the direction where you dont use scrolling frames,
or make shure theres no need to scroll (content is size of frame it is in),
or use a fancybox-type-of thing where the content is on top instead of in a frame,
or have 2 (jquery) buttons that when pressed do the up/dwn scrolling (instead of a scrollbar),
or have a link which opens the player in a new page,
or the standard way where video opens directly in the iOS player itself (QT/Safari).

Upvotes: 0

Related Questions