CODEWITHSUNDEEP
javascriptiframeyoutube
Ant Mar
Ant Mar

Reputation: 145

Hide iframe when Youtube video ends

Thank you everyone in advance. I need some help hidding an iframe youtube video when it ends can someone guide me how to do that??

 <iframe id="promo_video" src="http://www.youtube.com/embed/XzZudNOwkU8" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" style="display:none;position:absolute;top:228px;left:492px;" height="527" width="934" frameborder="0"></iframe>

i need something like this but i cant find how to make it 

 <script >
function myFunction()
{
    if (promo_video.end=positive)
    reload anotherother page


    }


</script>

Upvotes: 0

Views: 4091

Answers (1)

Sandip Vora
Sandip Vora

Reputation: 183

Hope this solution will work for you. The only change in solution is that you need only video id from iframe you have. Please refer the fiddle link mentioned below.

    <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: 'XzZudNOwkU8', <!-- video id should be here. last component from video URL -->
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
    }

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

    // when video ends
    function onPlayerStateChange(event) {        
        if(event.data === 0) {            
            $('#player').css('display', 'none');
        }
    }

</script>

Fiddle link

Upvotes: 3

Related Questions