Friday, March 16, 2012

[YouTube-API] iframe embed on ipad effecting other absolutely positioned divs above it

Hi there,

I'm working on a youtube video playlist style app that works fine on a desktop, but has some bugs on iPad.  The main issue I'm working on currently is this.

The layout is basically:

<div id="thumbnails"></div>
<div id="main_video"></div>

The site hits a json feed and populates the main_video with the first item in the feed.  The thumbnails div is filled with a <ul> of thumbnails of the other videos in the json.  Both are positioned absolutely, with the main_video always behind the thumbnails.

This works great, until the main_video starts playing (which on iPad of course you have to hit the play button, I assume due to the html5 preload limitation?  le sigh.).  Then, the thumbnails are unable to be clicked.  I have a onPlayerStateChange function attached to the according event, and have noticed the thumbnails only become unclickable when the player state change event == 1 - playing.  

I've tried in that function to reassign the click events to the thumbnails, to reassign the position: absolute and z-indices, but no luck.

Here's the exact iframe embed I'm using for the main_video, in case that helps:

<iframe width="1216" height="684" src="http://www.youtube.com/embed/CpN2XAg2bQs?wmode=transparent&amp;autohide=1&amp;egm=0&amp;hd=1&amp;iv_load_policy=3&amp;modestbranding=1&amp;rel=0&amp;showinfo=0&amp;showsearch=0&amp;enablejsapi=1" frameborder="0" allowfullscreen="" id="YT_main" style="left: -129px; "></iframe>

As I've mentioned, this behavior is not the case on a desktop browser.  Any thoughts you'd have would be greatly appreciated!  thanks :)

- ashley

--
You received this message because you are subscribed to the Google Groups "YouTube APIs Developer Forum" group.
To view this discussion on the web visit https://groups.google.com/d/msg/youtube-api-gdata/-/inMJx2BJWUUJ.
To post to this group, send email to youtube-api-gdata@googlegroups.com.
To unsubscribe from this group, send email to youtube-api-gdata+unsubscribe@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/youtube-api-gdata?hl=en.

No comments:

Post a Comment