html5 + youtube iframe api on ipad

[holli]

hello,

i have a html5 site where i create a youtube player dynamically using
javascript (http://code.google.com/intl/de-DE/apis/youtube/
iframe_api_reference.html) within a div

the site works if i use the ipad safari browser - but when i put my
files into xcode and build it the iframes created by the javasript are
not shown at all - i found some posts to change an if
within ..delegate.m but in my 0.9.3 is no if at all in this file.

any help would be great

thanks
holli

[Cameron Perry]

iframes will always kick you out to Safari on the iOS devices. If you copy/pasted the embed code (not the iframe) you can get the movie playing in your app. I've seen several cases where too many YT videos in a PG app will do some unhappy things (like play audio w/ no video), in which case using ChildBrowser plugin was the solution.

~Cameron

--
You received this message because you are subscribed to the Google
Groups "phonegap" group.
To post to this group, send email to phon...@googlegroups.com
To unsubscribe from this group, send email to
phonegap+u...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/phonegap?hl=en?hl=en

For more info on PhoneGap or to download the code go to www.phonegap.com

-------

Cameron Perry

Co-founder

Pivotal Action, Inc.

www.PivotalAction.com

[holli]

hello,

thanks for the info - but i don't know how i should do this - i
believe my hole page would work if i would receive the youtube api
events - but it looks like i do not get them maybe because i only have
the ipad simulator and i found this post here:
http://groups.google.com/group/phonegap/browse_thread/thread/1d5f5b3752b249e4/331b1d2f9a516c70?lnk=gst&q=iframe#331b1d2f9a516c70
?

here a short example:

i do on device ready within my index.html:

function onDeviceReady() {
inityt();
}
</script>

somewhere after body i have a div like this:

<div id='player'></div>

this i would use for the create player funciton in my api ready event.

the inityt is within my javascript file and it is called and running
because i put some console.log messages and i can see this function
runs completly without any error as far i know - the function looks
like this:

function iniyt(){
//console.log('crytapi debug#1');
var tag = document.createElement('script');
//console.log('crytapi debug#2');
tag.src = "http://www.youtube.com/player_api";
//tag.id = 'ytmHoHaSo' + plid;
// console.log('crytapi debug#3');
var firstScriptTag = document.getElementsByTagName('script')[0];
// console.log('crytapi debug#4');
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
//console.log('crytapi debug#5');
}

this function should fire an event 'onYouTubePlayerReady' - but i
don't get this event anymore and so i believe this is the reason i can
not create the player afterwards:

function onYouTubePlayerReady(playerId) {
console.log('onYouTubePlayerReady' + playerId);
createPlayer();
}

any idea why i don't get this event - is it because i'm only running
on the simulator?

i can open the complete page with the safari browser on the ipad
simulator and everything works great - but i can not build an app...

i also tried to figure out the ChildBrowser plugin - but i don't have
an idea how and where i need to change my simple page - if i could get
a code example i should be able to figure it out on my own - but id
need some help/starting point to make this page an app.

thanks
holli

PS: here is the createPlayer function:

function createLeftPlayer(ytid) {
console.log('player create function');
var ytid = ytid;
if (ytid === 'startup'){
var ytid = 'EV0qAQ9uyzY';
}
playerl = new YT.Player('pll', {
//frameborder: '1',
//align: 'middle',
height: hgtv,
width: '395',
videoId: ytid,
playerVars: { 'enablejsapi': plvar1, 'playerapiid': 'playerl',
'hd': plvar2, 'autoplay': plvar3, 'controls': plvar4, 'showinfo':
plvar5, 'showsearch': plvar6, 'rel': plvar7},
events: {
'onReady': onPlayerReadyL,
'onPlaybackQualityChange': onPlayerPlaybackQualityChangeL,
'onStateChange': onPlayerStateChangeL,
'onError': onPlayerErrorL
}
});
$('#player > iframe').attr('id', 'pl');
$('#pl').attr('frameborder', 0);
$('#pl').attr('title', 'YOUTUBE PLAYER');
console.log('creatPlayer end');

[tdawg]

This is quite an old thread, but, I too wanted to use player_api...

I need to catch 2 events.  Using phonegap build

Has anyone done this successfully?

[tdawg]

I thought I should post... the problem was my own, I hadn't set up config.xml for all the possible domains that would be needed to run the API.

Works now.