0

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.

user3512522
  • 39
  • 13

1 Answers1

1

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>
Community
  • 1
  • 1
SauriolJf
  • 412
  • 2
  • 10
  • As I am looking to add this to a WordPress site, I have no idea how to include your code. The YouTube videos on my site are added, like a lot of other elements, via a separate plugin. I have no idea how to alter plugins to include the code you provided. Also, I was looking for an overlay window where I could add my own content, like a Form. This looks like an alert box. No idea how to convert the alert box into a regular overlay window. – user3512522 Apr 08 '14 at 20:08
  • You won't be able to acheive your goal if you don't have programmation skills. I would suggest you a plugin like "Easy Fancybox" (https://wordpress.org/plugins/easy-fancybox/) for the overlay window. For the code, you can paste HTML code directly in your Wordpress post or page, so switch for "HTML" in your content editor and past the code that I gave you above (maybe you'll need to adapt it). – SauriolJf Apr 08 '14 at 20:15
  • I asked the developers of the easy-fancy plugin, if this was possible to achieve and they said it was not. Besides, again, I was not looking for the video to play on an overlay. I am looking for an overlay to appear AFTER the embedded video has stopped playing. – user3512522 Apr 08 '14 at 23:18
  • It's possible, you have to create a popup window when the video ends. I won't write you all the code you need but I can tell you than you'll need to replace the line : alert('done'); – SauriolJf Apr 09 '14 at 13:23