I have multiple YouTube Video on page and I want to open each YouTube Video on indivually.
My script is Pay/Run Video on single div. SO I want three video play in individual div id player. SO I taken three div with div id player.
HTML
// 2. This code loads the IFrame Player API code asynchronously. var tag = document.createElement('script'); tag.src = "https://www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); // 3. This function creates an <iframe> (and YouTube player) // after the API code downloads. var player; function onYouTubeIframeAPIReady() { // This function seems to be needed, so, don't remove it from your code. } // 4. The API will call this function when the video player is ready. function onPlayerReady(event) { event.target.mute(); event.target.playVideo(); } // Render the IFRAME once the button is clicked. function youtubevideo(videoIdval) { // "Destroy" the "player"> for allow re-create it with the new "clicked" video_id. if (player != null || player != undefined) { player.destroy(); } // Build the iframe with the "clicked" video_id: player = new YT.Player('player', { width: '100%', videoId: videoIdval, playerVars: {'autoplay': 1,'playsinline': 1,'origin': window.location.href }, events: {'onReady': onPlayerReady } }); }
<div><div id="player"></div><button onclick="youtubevideo('o5x6t68xVVE')">Click me</button></div> <div><div id="player"></div><button onclick="youtubevideo('wJp-BZpVBPA')">Click me</button></div><div><div id="player"></div><button onclick="youtubevideo('sPhhZg9v9NU')">Click me</button></div>