Name is required.
Email address is required.
Invalid email address
Answer is required.
Exceeding max length of 5KB

HTML5 Video on iPad + Drop down menu = links don't work


Hi guys,

I can't seem to find the answer to this problem.

On the iPad and iPhone, the JWPlayer uses HTML5. I have a normal HTML/CSS drop down menu above the video - when you roll over the drop down menu items, it is not "clickable" - the z-index is correct and all looks great, but anything that is part of the menu that is overlaying the video, renders quiet blurry and can't be clicked on.

Can someone help shed some light on the problem?

20 Community Answers

JW Player

User  
0 rated :

"Where is the Beef", can you provide a link?

JW Player

User  
0 rated :

Sure - here is a prototype: http://test.vuu.co

Drop down menu works correctly on Opera, Safari, IE7, IE8, IE9, Firefox and Chrome.

When you view it on the iPad and iPhone - all looks great as well. But any drop down links overlaying on top of the video does not work.

Ethan Feldman

JW Player Support Agent  
0 rated :

@David Smith – This is an iOS issue in general.

In iOS, any element that is over the <video> tag is not clickable. It happens with the regular <video> tag too. There isn’t anything we can do about this, unfortunately.

JW Player

User  
0 rated :

Wow, that is very unfortunate :(

Ethan Feldman

JW Player Support Agent  
0 rated :

Yeah, it is :( , believe me, I have been fighting with iOS for weeks on several issues like this…

JW Player

User  
0 rated :

Maybe this could help?
http://stackoverflow.com/questions/3007797/ipad-iphone-html5-video-loading

Ethan Feldman

JW Player Support Agent  
0 rated :

@Aidil – Thanks. I saw that solution. It doesn’t work for me because I am writing a plugin and I can’t use jQuery though :\

JW Player

User  
0 rated :

I'm running into this issue on a Wordpress based JWPlayer installation. Funny thing is - I'm sure I didn't have this problem earlier in the year??? Is it a recent iOS implementation?

Anyone have any other ideas for how it can be fixed?

JW Player

User  
0 rated :

I'm looking to do something similar to the stockoverflow solution above as a temp workaround. Here's the site in question: testtrack.tv

Basically, when the user clicks the 'videos' link (.nav2), disable the <video> tag controls attribute and then re-apply it when a user mouses out. The code needs tweaking but I can't even find the <video> element:
bc.. $().ready(function() {
$(".nav2").click(function()) {
$("video").removeAttr("controls");
}
$(".sub").mouseout(function()) {
$("video").attr("controls");
}
});



When viewing the source, I can't see the HTML5 <video> wrapper for the HTML5 version of the YouTube embed. Does JWPlayer switch the Flash version out for the HTML5 in JavaScript?

Ethan Feldman

JW Player Support Agent  
0 rated :

Yes it does, through the JW Embedder. It will embed the right method based on what mode the player is in.

JW Player

User  
0 rated :

Hi Ethan, well, removing the controls attribute doesn't seem to work anyway.

If you take a look at www.testtrack.tv on an iPhone or iPad and click the 'videos' link in the navigation you'll see the menu opens behind the video.

If you look in a browser without Flash and click there it opens in front (and using Firebug or similar you can see that clicking Videos is removing the 'controls' attribute within the <video> tag).

So, are there any other known workarounds for this?

JW Player

User  
0 rated :

Well, in case this helps anyone in future I have a hacky way of solving it. I've basically elected to hide the video holder div when the menu trigger is hovered over. I've also done a little agent sniffing which I know isn't bullet-proof but should sort most cases.

bc.. if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
jQuery(function() {
jQuery(".nav2").hover(function() {
jQuery("#jwplayer-1-div").toggle();
});
});
};

Ethan Feldman

JW Player Support Agent  
0 rated :

Cool, glad you got that sorted!

JW Player

User  
0 rated :

On the IPAD using jwplayer 5.7.1896 --
I was able to use
$("video").removeAttr("controls");
to get a video dialog overlay to be clickable.
BUT I have a problem with the dialog displayed over youtube videos on the IPAD, in this case the dialog is behind the videoplayer and I cannot figure out how to get it to overlay the video. z-indexing does not seem to work nor does a lot of other recommendations I've found. If anyone has any suggestions I would appreciate. thanks

Ethan Feldman

JW Player Support Agent  
0 rated :

This is because in iOS the <video> tag takes control of every click anywhere over the player display space. Apple enforces this.

JW Player

User  
0 rated :

Can you explain why I get a different behavior for Youtube videos than I do for something else like e.g. feeds.reuters.com.....
With youtube videos the dialog is overlayed by the video and I don't see the dialog. with reuters or something other than youtube I see the dialog - it is not overlayed bu the video and they both have the <video> tag
thanks

Ethan Feldman

JW Player Support Agent  
0 rated :

Do you have an example of this?

JW Player

User  
0 rated :

Here is an example:-
On an IPAD using safari - You will need to log into my test account.
go to http://my.twonky.com
on the top right of the screen select "sign in"
username: sagherdi46
pass: asdfgh

you should be on the home screen which is my.twonky.com/video
half way down the screen on the left there is "My Bookmarks", select the reuters.com video
on the video player screen click the play icon in the centre of the player, once the video starts playing select the button "Bookmarked" below the video - you should see a dialog asking you to confirm deletion of the bookmark -- here the buttons are not clickable but I am able to fix with the hack to remove controls.
Now hit the back button to go back to the video home screen, select the youtube video under the "My bookmarks" title and repeat the steps as before on the player page. you will see that the confirm delete dialog is hidden by the video -- zoom in and you'll see the dialog appearing from beneath the video.

Can you explain why there is this difference with youtube and how to possibly get the dialog to overlay the video ??
thanks.

JW Player

User  
0 rated :

Hi Ethan, another question in addition to above...I tried using youtube iframe code which works and displays the dialog correctly over the video BUT the buttons are not clickable - is there a fix for this perhaps ? thanks

Ethan Feldman

JW Player Support Agent  
0 rated :

@Shireen – Email me, I might have a fix – ethan [at] longtailvideo [dot] com, thanks.

This question has received the maximum number of answers.