0

I have multiple iframes on a page that when they start to play they automatically go fullscreen on mobile. I am using the youtube api to load the videos and have a "cover" image over the top with a custom play button. On mobile, when the user clicks the play button the cover image disappears and the video goes fullscreen and starts playing - so far so good. But what I need to be able to do is that when the user clicks 'done' the video leaves fullscreen (which it does) and the cover image comes back up (which it currently doesn't). The problem is that I cant seem to detect when the user clicks 'done'.

I've tried using:

$('iframe').bind('webkitendfullscreen', function(){ 

    // code in here shows the cover image but even just a standard alert isn't firing.
    $('#coverImage').show();

});

No matter what I do the webkitendfullscreen isn't firing. Is there no way to detect when an iframe is done on mobile?

any help/pointers appreciated!

1 Answer 1

0

According to the answer from powtac from this SO post:

You can not interact with iframes which are not under the same domain. This is always prevented by the browser's policy.

I think from this SO post you will have a hint on your problem.

You can check this SO post as well.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.