CODEWITHSUNDEEP
javascriptjqueryvideoiframe
Swanand Taware
Swanand Taware

Reputation: 753

How to access event "onplay()" for iframe?

I have two iframes in one page.

<iframe id="video" width="420" height="315" src="//www.youtube.com/embed/9B7te184ZpQ?rel=0" frameborder="0" allowfullscreen></iframe>
<iframe id="video1" width="420" height="315" src="//www.youtube.com/embed/9B7te184ZpQ?rel=0" frameborder="0" allowfullscreen></iframe>

I want to access onplay() event of iframe, then i can able to stop second video(#Video1) while playing first one(#Video) and Stop first video(#Video) when playing Second(#Video1).

It is possible using YoutubeAPI but i do not want to use that because i have other url videos not Youtube videos(here i put youtube links instead orignal links to avoid copyright). Is there another way except YoutubeAPI. YoutubeAPI is not working on another link resources. Please Suggest.

Upvotes: 1

Views: 2312

Answers (1)

Ave
Ave

Reputation: 4430

It has two <iframe>. First, you need switch between iframe.

Is there a way to change context to iframe in javascript console?

After, here my code how to access to event onPlay() of <iframe>

<script src="https://www.youtube.com/iframe_api"></script>

<div class="module module-home-video">
    <span class="module-strip">Latest Product Video</span>
    <div id="video"></div>
</div>

<script>
    var player, playing = false;
    function onYouTubeIframeAPIReady() {
        player = new YT.Player('video', {
            height: '360',
            width: '640',
            videoId: 'xmhtV4270NU',
            events: {
                'onStateChange': onPlayerStateChange
            }
        });
    }

    function onPlayerStateChange(event) {
        if(!playing){
            alert('onPlay is clicked');
            playing = true;
        }
    }
</script>

Upvotes: 0

Related Questions