How To Update Youtube Video Id When Clicking Different Play Buttons

I have a feed full of videos. When a user clicks on a play button, I want that specific video ID to be loaded into the videoID variable found in the YouTube API. Right now, I have

Solution 1:

If you use player.loadVideoById("Vw4KVoEVcr0"); it will play the video Vw4KVoEVcr0.

Since you have an onclick event listener for all elements with the group of media-circle each time you click that element it will continue to load the same video ID unless you tell it to play a different ID.

When you construct the video results/list you need to tell it what video ID should play when that function is run. If you give each media-circle an ID to match the video it should play you can target the ID of the element that triggers the function to change/load the new video.

---

Here is an example. I have set the ID of the images to the video ID it should play when clicked. You can see all of them share the same media-circle class. JsFiddle Demo

Demo Source code

HTML

<divid="player"></div><hr/><imgid="ovrGzbsQZqc"class="media-circle"src="http://i.ytimg.com/vi/ovrGzbsQZqc/0.jpg"/>Pegboard Nerds - Emoji VIP [Monstercat Official Music Video]<br><imgid="YnwsMEabmSo"class="media-circle"src="http://i.ytimg.com/vi/YnwsMEabmSo/0.jpg"/> Marshmello - Alone [Monstercat Official Music Video]<br><imgid="-7Ok0O2nQaA"class="media-circle"src="http://i.ytimg.com/vi/-7Ok0O2nQaA/0.jpg"/> Pegboard Nerds - Melodymania [Monstercat EP Release]<br>

Javascript/jQuery

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
functiononYouTubeIframeAPIReady() {
    player = newYT.Player('player', {
        height: '200',
        width: '350',
        videoId: 'HoVWmW0Zdmo',
        events: {
            'onReady': onPlayerReady
        }
    });
}
functiononPlayerReady(event) {
    event.target.playVideo();
}
$(function() {
    jQuery(".media-circle").on("click", function() {
        player.loadVideoById(this.id);
    });
});

CSS

img{max-height:100p;max-width:150px;}

If you have any questions about the source code above please leave a comment below and I will get back to you as soon as possible.

I hope this helps. Happy coding!