CODEWITHSUNDEEP
javascriptjqueryvideoyoutube
user2601150
user2601150

Reputation:

Allow only one YouTube video in the same page with jQuery

I have some videos which are embedded from YouTube in my "index.php". I am able to watch several videos at the same time by clicking them repeatedly. So, as usual it can be done. But I want to block this somehow.

For example, I'm watching X video and I clicked play to watch Y video. The X video should stop when I do it. Then I should be able to continue watching the Y video. I saw this feature in a website which I don't remember the name of it. And I don't know how to do and have an idea.

What I can guess is that it can be done by using some JavaScript or jQuery.

Here is an example for YouTube video code:

<iframe width="426" height="240" src="//www.youtube.com/embed/lWA2pjMjpBs?rel=0" frameborder="0" allowfullscreen></iframe>

Upvotes: 2

Views: 3038

Answers (3)

Tymoxx
Tymoxx

Reputation: 176

Here is my JavaScript (without jQuery) solution to allow only one YouTube video to play at the time.

DEMO.

First you need to add a Youtube API by simply adding the script to your HTML page:

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

Then paste as many embed videos as you need. Keep in mind that

?enablejsapi=1&version=3&wmode=transparent

needs to be added to each link in order to access API. I wrapped the videos in div with yt_videos class. 

<div class="yt_videos">
        <iframe class="video_groups" src="https://www.youtube.com/embed/r4CH0al0ucs?enablejsapi=1&version=3&wmode=transparent" frameborder="0" allowfullscreen></iframe>
        <iframe class="video_groups" src="https://www.youtube.com/embed/lL9Zoc46ZG0?enablejsapi=1&version=3&wmode=transparent" frameborder="0" allowfullscreen></iframe>
        <iframe class="video_groups" src="https://www.youtube.com/embed/s1NZ2mkW0hM?enablejsapi=1&version=3&wmode=transparent" frameborder="0" allowfullscreen></iframe>
    </div>

Then in javascript I access onYouTubeIframeAPIReady() so I can control players behaviour. I loop through the iframes and assign unique id's: 

var players = [];

function onYouTubeIframeAPIReady() {

var predefined_players = document.getElementsByClassName("yt_videos")[0].getElementsByTagName('iframe');

for(var i = 0; i < predefined_players.length; i++){
predefined_players[i].id = "player" + i;
  players[i] = new YT.Player("player" + i, {
    events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
    }
});
}
}

function onPlayerStateChange(event) {
    var link = event.target.a.id;
    var newstate = event.data;
if (newstate == YT.PlayerState.PLAYING) {
players.forEach(function(item, i) {
    if (item.a.id != link) item.pauseVideo();
});
}
}

See the DEMO.

Upvotes: 2

Mike Shi
Mike Shi

Reputation: 474

If you're using only 1 iframe and just have several links on the sides that would contain the src destination of the iframe you could change the src attribute of the iframe like this:

$('.YoutubeLink').click(function(event){
    $('#myIframe').attr('src',$(this).attr('href'));
});

Upvotes: 0

giordanolima
giordanolima

Reputation: 1218

You can use the Youtube JS API https://developers.google.com/youtube/js_api_reference

With it you can handle youtube player events...

Upvotes: 0

Related Questions