I recently tried to embed YouTube videos by its id in a list into YouTube iframe, as per its documentation, into html with JavaScript. But when passing the list, sometimes it plays, but most of the time it shows that the video is not available as this enter image description here.
But when playing each id separately, it works perfectly fine
I tried a lot searching on google and trying as per many suggestions, but still, I am helpless.please help me if there is a solution to play custom bunch of ids' by passing into playlist.
My code is,
// 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() { player = new YT.Player('player', { height: '50%', width: '100%', border: '0', top: '-0px', style: 'flex: 1 1 auto', left: '-0px', videoId: 'f_lATzEodFM', playerVars: {'playsinline': 1,'controls': 1,'playlist': "mEyIRy8cWPQ,fqIUJB3uXpM,0z_opoVrjPg,5f7ZhOMd_K0,hk2GocIz5KY,tnr8d5V3f9w,vSp9-hrCwi4,DeGjWtAdOkI,lXEss4peoek,znV4aP0kTe8,LLMPQVV-LgU,G76jhOigXIY,DrqYOsMR02w,FDp32IQvnSk,RFr1bzb29yQ,hLoYH_r6rXg,WX0cl1h3lxI,bW_RFwIKolg,xvT2QC8Iqvk,eUJjZEYRWHE,jceBeIDKZP4,tNpAQdObP8E,9fB66XZ-SNM,vNRc1SIhAWc,2bvIKdXCgl0,DR8djx8_SJk,ObgavM9e90c,LR5FHMDhMxk,1UsPCqhKwkY,gOJ0iIxHri0,RbiduQexthY,e8I_S6HBSZA,5r73WwyJC8Y,lpYFSOr4OFI,uaKaXJvH7e8,DTBarBjMtaQ,cm9ven56ocs,tMPNAnogZ90,XDL5_RWQYSw,Ql0Ged2p2G8,SEu24dsmKAg,AhzYwsfC8hQ,veVzWNmxNts,Oyp4mbv9114,MaDFYoZzGxQ,qWBljeLFtW4,Qz5mcZnbuEM,zryXUx7IIeE,01ZaOeafJi4,al-2VqyTHt0,ljhSOxL4qI4,NGyEBhXZ2pA,w4tEfRUbRkQ,m0pYGrVnfSk,j8I0HcLvB28,h2RDhpru2Ac,0bDSNS90B5s,QpwqUyk9N2w,N0S0p0p778k,0nrxJUzm0UQ,QzjsdpxCTyQ,SVkfvcYwV7Y,-9PFUgLP-B4,BNTMwHTzAlQ,XL8PjsiJ3ac,ha65CdYR590,iQ36unesfaw,joPj-wJHTk0,hVjBcsd5-d8,4tWuSHlBF90,o6DOJc0GTa8,h9JPeoSx64M,QnxM_HTDQ3E,Of_k7Pezv1g,imhIePD5LyY,eVO24cdLfm4,lu65kWfHwuI,o3AvF6zsOew,D83VWU_qeUc,OLUXUs9fdjA,g9HAndOHJnc,xXVm3VgSfMY" }, events: {'onReady': onPlayerReady,'onStateChange': onPlayerStateChange,'onError': onErrorPlayer } });}function onErrorPlayer(event) { event.target.nextVideo(); event.target.playVideo(); console.log("error playing : "+ event.target.videoId);}// 4. The API will call this function when the video player is ready.function onPlayerReady(event) { event.target.playVideo();}// 5. The API calls this function when the player's state changes.// The function indicates that when playing a video (state=1),// the player should play for six seconds and then stop.var done = false;function onPlayerStateChange(event) { if (event.data == YT.PlayerState.PLAYING && !done) { // setTimeout(stopVideo, 6000); done = true; } if (event.data === 0) { console.log("Player finished "); }}function stopVideo() { player.stopVideo();}<div id="player"></div>How to solve this problem?Once again, I am addressing the problem, i.e., the list shows ok for sometimes but most of the time it shows as Video Unavailable without playing any videos.