0

I'm trying to stop emebed youtube video when another one is played on the same page, I found this: stackoverflow fiddle-example But when i try to use it on my web page it doesn't work: my_test

SCRIPT

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

function onYouTubeIframeAPIReady() {
    var $ = jQuery;
    var players = [];
    $('iframe').filter(function(){return this.src.indexOf('http://www.youtube.com/') == 0}).each( function (k, v) {
        if (!this.id) { this.id='embeddedvideoiframe' + k }
        players.push(new YT.Player(this.id, {
            events: {
                'onStateChange': function(event) {
                    if (event.data == YT.PlayerState.PLAYING) {
                        $.each(players, function(k, v) {
                            if (this.getIframe().id != event.target.getIframe().id) {
                                this.pauseVideo();
                            }
                        });
                    }
                }
            }
        }))
    });
}
</script>

HTML

One: 
<iframe frameborder="0" allowfullscreen="1" title="YouTube video     player" width="160" height="100" src="http://www.youtube.com/embed    /zXV8GMSc5Vg?enablejsapi=1&amp;origin=http%3A%2F%2Ffiddle.jshell.net">    </iframe>
<br/>
Two:
<iframe frameborder="0" allowfullscreen="1" title="YouTube video player" width="160" height="100" src="http://www.youtube.com/embed/LTy0TzA_4DQ?enablejsapi=1&amp;origin=http%3A%2F%2Ffiddle.jshell.net">    </iframe>

What's wrong? I've created the project on google developers, i've created the API key but i don't know where i must put that.

GGKMNTN
  • 87
  • 9

2 Answers2

0

You forgot to add the jquery lib ( https://code.jquery.com/ )

ceasar
  • 1,512
  • 3
  • 17
  • 25
  • It was a mistake but now I've inserted the jquery lib but it still don't work – GGKMNTN Dec 06 '17 at 10:08
  • I've inserted the last lib – GGKMNTN Dec 06 '17 at 10:21
  • I've tried also by insert this but still not working: `var GoogleAuth; // Google Auth object. function initClient() { gapi.client.init({ 'apiKey': 'YOUR_API_KEY', 'clientId': 'YOUR_CLIENT_ID', 'scope': 'https://www.googleapis.com/auth/youtube.force-ssl', 'discoveryDocs': ['https://www.googleapis.com/discovery/v1/apis/youtube/v3/rest'] }).then(function () { GoogleAuth = gapi.auth2.getAuthInstance(); // Listen for sign-in state changes. GoogleAuth.isSignedIn.listen(updateSigninStatus); }); }` – GGKMNTN Dec 06 '17 at 11:19
  • Change this.src.indexOf('http://www.youtube.com/') to this.src.indexOf('https://www.youtube.com/') and set the link to players also to https src="https://www.youtube.com/ and change this.pauseVideo(); to this.stopVideo(); – ceasar Dec 06 '17 at 11:45
  • Also set the whole script just before the

    instead of the header

     – ceasar Dec 06 '17 at 11:46
  • I've tried to do what you told me @ceasar but it still don't work [http://www.giorgiopassino-mountainguide.com/beta/prova_vdo.html](http://www.giorgiopassino-mountainguide.com/beta/prova_vdo.html) – GGKMNTN Dec 06 '17 at 23:38
  • Nobody can help me? I've tried by using the other solution where the iframe is created using code and not by embed it:(http://www.giorgiopassino-mountainguide.com/beta/prova_vdo2.html) and with this solution it works but in my case the user must embed the iframe itself from Youtube.com – GGKMNTN Dec 18 '17 at 09:25
0

SOLVED The problem was that in the example they used the "origin" parameter, this parameter if setted avoids the introduction into the page of malicious third-party JavaScript code, which can take control of the YouTube player.

src="http://www.youtube.com/embed/LTy0TzA_4DQ?enablejsapi=1&origin=http%3A%2F%2Ffiddle.jshell.net"

This is why the code work on the fiddle page but not on mine. So i've changed this origin path with my complete URL of the host page and now it work!

GGKMNTN
  • 87
  • 9