CODEWITHSUNDEEP
jquerywordpressyoutubeoverlay
user3512522
user3512522

Reputation: 39

Overlay window after YouTube video has finished playing in WordPress

I have various YouTube videos in my blog posts (WordPress) by adding them like so: <iframe width="700" height="525" src="http://www.youtube.com/embed/KA-OzK1RCdY?feature=oembed" frameborder="0" allowfullscreen></iframe>.

Is there any way I can have an overlay window show up over the YouTube video area AFTER the video has stopped playing...?? I want to add a form in this overlay for subscription purposes.

Thanx in advance.

Upvotes: 0

Views: 2270

Answers (1)

SauriolJf
SauriolJf

Reputation: 412

You can do this with Youtube player API :

Here's a fiddle to see that it works

This is an example I took from another post :

<div id="player"></div>

<script src="http://www.youtube.com/player_api"></script>

<script>

    // create youtube player
    var player;
    function onYouTubePlayerAPIReady() {
        player = new YT.Player('player', {
          height: '390',
          width: '640',
          videoId: '0Bmhjf0rKe8',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
    }

    // autoplay video
    function onPlayerReady(event) {
        event.target.playVideo();
    }

    // when video ends
    function onPlayerStateChange(event) {        
        if(event.data === 0) {          
            alert('done');
        }
    }

</script>

Upvotes: 1

Related Questions