CODEWITHSUNDEEP
javascriptyoutube-api
Moran Talmon
Moran Talmon

Reputation: 595

handling multiple youtube videos

I have three youtube videos that I want to stop when the user click on a link link the page. this is my code

var tag = document.createElement('script');
    tag.src = "//www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    var youtubePlayer1;
    var youtubePlayer2;
    var youtubePlayer3;
    function onYouTubeIframeAPIReady() {
        youtubePlayer1 = new YT.Player('firstPlayer', {

        });
        youtubePlayer2 = new YT.Player('secondPlayer', {

        });
        youtubePlayer3 = new YT.Player('thirdPlayer', {

        });
    }

    function stopVideo() {
        if (youtubePlayer1 != null) {
            youtubePlayer1.stopVideo();
        }
        if (youtubePlayer2 != null) {
            youtubePlayer2.stopVideo();
        }
        if (youtubePlayer3 != null) {
            youtubePlayer3.stopVideo();
        }
    }

This is the html code

<div id="blog">
                                    <!--///////////// UN ORDERED LIST /////////////-->
                                    <ul>
                                        <!--///////////// LIST /////////////-->
                                        <li>
                                            <!-- iframe -->
                                            <h3>
                                                <strong>להקת קולות - בהרקדה חסידית...</strong></h3>
                                            <br />
                                            <iframe id="firstPlayer" width="800" height="485" src="http://www.youtube.com/embed/F0eR1KFkt58"
                                                style="border:0" ></iframe>
                                            <br />
                                            <br />
                                            <img src="images/bg3.PNG" alt="" /><p>
                                                <span>תאור הוידאו: </span>טקסט אודות הוידאו, תאריך</p>
                                        </li>
                                        <!--///////////// SECOND IMAGE /////////////-->
                                        <li>
                                            <!-- iframe -->
                                            <h3>
                                                <strong>להקת קולות - בהרקדה ישראלית מוטרפת...</strong></h3>
                                            <br />
                                            <iframe id="secondPlayer" width="800" height="485" src="http://www.youtube.com/embed/mPTX4guU1W8"
                                                style="border:0" ></iframe>
                                            <br />
                                            <br />
                                            <img src="images/bg3.PNG" alt="" /><p>
                                                <span>תאור הוידאו: </span>טקסט אודות הוידאו, תאריך</p>
                                        </li>
                                        <!--///////////// THIRD IMAGE /////////////-->
                                        <li>
                                            <!-- iframe -->
                                            <h3>
                                                <strong>להקת קולות - בואי בשלום...</strong></h3>
                                            <br />
                                            <iframe id="thirdPlayer" width="800" height="485" src="http://www.youtube.com/embed/E-_ONZOcScU"
                                                style="border:0"></iframe>
                                            <br />
                                            <br />
                                            <img src="images/bg3.PNG" alt="" /><p>
                                                <span>תאור הוידאו: </span>טקסט אודות הוידאו, תאריך</p>
                                        </li>
                                    </ul>
                                </div>

when the user click on the link it calls the stopVideo function that cycle through all the players and stop them.

for some reason I can get it to work only on youtubePlayer2 object what am I doing wrong here?

Forgot to mention, when I debug the app using the chrome debugger I can see the the objects are defined and that the function is called.

Upvotes: 4

Views: 4079

Answers (5)

Antonio Almeida
Antonio Almeida

Reputation: 371

Mohamed Navas' answer (first answer) helped me to come up with this:

<br>
    <button id="pause">Pause</button>
<br>
<br>

<div id="firstPlayer"></div>
<div id="secondPlayer"></div>
<div id="thirdPlayer"></div>

<script>
var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var youtubePlayer1;
var youtubePlayer2;
var youtubePlayer3;

function onYouTubeIframeAPIReady() {
        youtubePlayer1 = new YT.Player('firstPlayer',{
            height: '240',
            width: '320',
            videoId: 'qV9HxRU4ozY',
            events: {
                'onReady': onPlayerReady
            }
        });
        youtubePlayer2 = new YT.Player('secondPlayer', {
            height: '240',
            width: '320',
            videoId: 'nBRpWJ0QUH0',
            events: {
                'onReady': onPlayerReady
            }
        });
        youtubePlayer3 = new YT.Player('thirdPlayer', {
            height: '240',
            width: '320',
            videoId: 'E-_ONZOcScU',
            events: {
                'onReady': onPlayerReady
            }
        });
    }

    function onPlayerReady(event) {
        document.getElementById('pause').onclick = function() {
            youtubePlayer1.pauseVideo();
            youtubePlayer2.pauseVideo();
            youtubePlayer3.pauseVideo();
            e.preventDefault();
        };
    };


</script>

https://jsfiddle.net/tonhaoln/ancz2vkn/

Upvotes: 0

Mohamed Navas
Mohamed Navas

Reputation: 612

Try this, its worked fine.

Note http:// is missing in src, because stackoverflow shows an error while posting with src. so correct it and test.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
tag.src = "//www.youtube.com/iframe_api";

Full working code

<!DOCTYPE HTML>
<html>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<body>
<div id="firstPlayer"></div>
<div id="secondPlayer"></div>
<div id="thirdPlayer"></div>
<script>
var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var youtubePlayer1;
var youtubePlayer2;
var youtubePlayer3;

function onYouTubeIframeAPIReady() {
        youtubePlayer1 = new YT.Player('firstPlayer',{
            height: '240',
            width: '320',
            videoId: 'F0eR1KFkt58',
            events: {
                'onReady': onPlayerReady1
            }
        });
        youtubePlayer2 = new YT.Player('secondPlayer', {
            height: '240',
            width: '320',
            videoId: 'mPTX4guU1W8',
            events: {
                'onReady': onPlayerReady2
            }
        });
        youtubePlayer3 = new YT.Player('thirdPlayer', {
            height: '240',
            width: '320',
            videoId: 'E-_ONZOcScU',
            events: {
                'onReady': onPlayerReady3
            }
        });
    }
function onPlayerReady1(event) {
        event.target.playVideo();
        $('a').click(function(e) { 
            youtubePlayer1.stopVideo();
            e.preventDefault();
        });
    }
function onPlayerReady2(event) {
        event.target.playVideo();
        $('a').click(function(e) { 
            youtubePlayer2.stopVideo();
            e.preventDefault();
        });
    }
function onPlayerReady3(event) {
        event.target.playVideo();
        $('a').click(function(e) { 
            youtubePlayer3.stopVideo();
            e.preventDefault();
        });
    }
</script>
    <a>Stop</a>
</body>
</html>

Upvotes: 0

Sam Bowyer
Sam Bowyer

Reputation: 60

I don't see the need for the if statement if your code just runs on when not being able to find the youtubeplayer, but I once solved a problem similar by adding a else statement that made sure something would happen - which may explain why the above was only happening every now and then.

It only takes a little copy and paste.

function stopVideo() {
    if (youtubePlayer1 != null) {
        youtubePlayer1.stopVideo();
    }
    else {
    youtubePlayer1.stopVideo(); 
    }
    if (youtubePlayer2 != null) {
        youtubePlayer2.stopVideo();
    }
    else {
    youtubePlayer2.stopVideo(); 
    }
    if (youtubePlayer3 != null) {
        youtubePlayer3.stopVideo();
    }
    else {
    youtubePlayer3.stopVideo(); 
    }
}

Upvotes: 1

Greg Schechter
Greg Schechter

Reputation: 2299

This code sample should work without issue, and in my testing it worked without flaw. Try making sure the script tag is added at the bottom of the page. This will help insure that the iframes are loaded by the time you make calls to them. Also try out http://www.youtube.com/html5 to see if that has a more reliable experience.

Upvotes: 1

Matias Molinas
Matias Molinas

Reputation: 2296

I think that in this way works:

http://jsfiddle.net/ZLMF8/3/

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" 

src="https://ajax.googleapis.com/ajax/libs/swfobject/2/swfobject.js"></script></head>

<body>

<div id="ytplayer1">
<p>You will need Flash 8 or better to view this content.</p>

</div>

<div id="ytplayer2">
<p>You will need Flash 8 or better to view this content.</p>

</div>

<div id="ytplayer3">
<p>You will need Flash 8 or better to view this content.</p>

</div>

<script type="text/javascript">

var params = { allowScriptAccess: "always" };

swfobject.embedSWF("http://www.youtube.com/v/F0eR1KFkt58&enablejsapi=1&playerapiid=ytplayer1", "ytplayer1", "425", "365", "8", null, null, params);

swfobject.embedSWF("http://www.youtube.com/v/mPTX4guU1W8&enablejsapi=1&playerapiid=ytplayer2", "ytplayer2", "425", "365", "8", null, null, params);

swfobject.embedSWF("http://www.youtube.com/v/E-_ONZOcScU&enablejsapi=1&playerapiid=ytplayer3", "ytplayer3", "425", "365", "8", null, null, params);

function stop() {

  if (ytplayer1) {

    ytplayer1.stopVideo();

  }
  if (ytplayer2) {

    ytplayer2.stopVideo();

  }
  if (ytplayer3) {

    ytplayer3.stopVideo();

  }

}​

</script>

<a href="javascript:void(0);" onclick="stop();">Stop</a>


</body>

</html>​

Upvotes: 1

Related Questions