0

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');
    }
}
Gary Reckard
  • 277
  • 2
  • 13
  • I don't think this will be possible for iPhone Safari because a video element can play inline instead of full-screen only when **`webkit-playsinline`** is enabled. This is only possible for a `UIWebView` where the `allowsInlineMediaPlayback` property is set to **YES** (which is true for iPad, but not for iPhone or iPod) Touch. See [here](http://stackoverflow.com/a/5893493/4241842). – not_a_bot Oct 06 '15 at 00:13
  • Thanks, @not_a_bot. Would it be possible to somehow catch the users tap/click before the YouTube API fires the PLAYING event? I suppose, maybe I could put a clear div over the video... and listen for when they click/tap on that, rather than listening for the PLAYING event...? – Gary Reckard Oct 06 '15 at 03:43
  • Yes, I believe that would be a possible workaround. – not_a_bot Oct 06 '15 at 15:53

0 Answers0