I am using the YouTube API, and my intention is to, when a user clicks on a video to play it, instead pause or stop the video, and then show a popup asking them to give me their email address. When they do that or close the popup, it would then start the video playing.
This works fine on my desktop. But on the iPhone, Safari opens up the full screen video player thingy... with a paused/stopped video. Closing that by clicking 'Done' brings me back to the website, with the email popup thing visible... and closing that will start the video playing..
But I want to be able to show that popup BEFORE iPhone Safari opens up the blank video player. Any suggestions?
Gary
Edit: My code so far is this:
function set_up_video(){
$.each($('.youtube-player'), function(){
player_id = 'iamavl-video-'+$(this).attr('data-service-id')
player_element = $('#'+player_id);
player = new YT.Player(player_id, {
height: '461',
width: '707',
videoId: $(this).attr('data-service-id'),
events: {
'onReady': onPlayerReady
},
wmode: 'transparent',
playerVars: {
autohide: 1,
autoplay: 0,
cc_load_policy: 0,
color: "red",
controls: 1,
disablekb: 0,
enablejsapi: 1,
fs: 1,
iv_load_policy: 3,
loop: 0,
modestbranding: 0,
rel: 0,
showinfo: 0,
start: 0,
theme: "dark",
version: 3,
wmode: "transparent"
}
});
});
}
function onYouTubeIframeAPIReady() {
set_up_video();
}
function onPlayerReady(event) {
player.addEventListener('onStateChange',onPlayerStateChange);
}
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING) {
//console.log('PLAYING');
player.pauseVideo();
$('#email-collection-modal').addClass('shown-once').modal('show');
}
if (event.data == YT.PlayerState.ENDED) {
//console.log('ENDED');
}
if (event.data == YT.PlayerState.PAUSED) {
//console.log('PAUSED');
}
if (event.data == YT.PlayerState.BUFFERING) {
//console.log('BUFFERING');
}
if (event.data == YT.PlayerState.UNSTARTED) {
//console.log('UNSTARTED');
}
}