إنشاء قائمة تشغيل فيديوهات يوتيوب

بهذه الإضافة يمكنك أن تنشئ قائمة تشغيل من فيديوهات يوتيوب وتتحكم بها بسهولة , ولا تحتاج ان تعديل شئ في اليوتيوب او ان تمتلك الفيدوهات كل ما تحتاجه فقط روابط الفيديوهات التي تعجبك وتضيفها في الآداة .

أفضل مكان لهذه النوعية من الأدوات يكون في موضوع أو صفحة

ملاحظة هامة : لا احل استخدام الآداة في أى محتوى لنشر الموسيقى أو الأفلام والمسلسلات وما شابهها.


<style>
#vplaylist-container {width: 100%;}  
#vplaylist-in{position:relative;background-color:#000;display:flex;flex-direction:row-reverse;gap:10px;height:460px;padding:10px;border-radius:4px;direction:rtl;}
#vplaylist-in * {box-sizing:border-box;}
#vplaylist-video{width:100%;}
#vplaylist-video iframe{width:100%;height:100%;}
#vplay-cont{order:1;flex-shrink:0;position:relative;}
#vplaybtn{background-color:#fff;width:40px;height:40px;border-radius:4px 0 0 4px;color:#000;font-size:20px;font-weight:bold;position:absolute;left:0;translate:-100% 0;top:20px;border: 0;transition:all .4s;}
#vplay-cont  #vplaybtn .vbtnopen,#vplay-cont.activevplay  #vplaybtn .vbtnclose{display:none;}
#vplay-cont  #vplaybtn .vbtnclose,#vplay-cont.activevplay  #vplaybtn .vbtnopen{display:block;}
#vplay-cont.activevplay  #vplaybtn{border-radius:50%;top:0;}
#vplay-cont.activevplay #vplaylist-list{opacity:0;visibility:hidden;width:0;padding:0;}
#vplaylist-list{background-color:#fff;padding:10px;overflow-y:auto;border-radius:4px;width:200px;display:flex;flex-direction:column;gap:5px;height:100%;transition:all .4s;}
#vplaylist-list > div > b{display:none;}
#vplaylist-list > div{height:36px;display:flex;flex-shrink:0;align-items:center;cursor:pointer;border-radius:4px;overflow:hidden;}
#vplaylist-list > div:hover,#vplaylist-list > .active-video{background-color:#FF0033;color:#fff;}
@media screen and (max-width : 800px) {#vplaylist-in {height:360px;}}  
@media screen and (max-width : 650px) {
#vplaylist-in {height: 300px;}  
#vplay-cont #vplaylist-list{opacity:0;visibility:hidden;width:0;padding:0;}
#vplay-cont.activevplay #vplaylist-list{opacity:1;visibility:visible;width:200px;padding:10px;}
#vplaybtn {border-radius:50%;top:0}
#vplay-cont.activevplay  #vplaybtn{border-radius:4px 0 0 4px;top:20px;}  
#vplay-cont  #vplaybtn .vbtnopen,#vplay-cont.activevplay  #vplaybtn .vbtnclose{display:block;}
#vplay-cont  #vplaybtn .vbtnclose,#vplay-cont.activevplay  #vplaybtn .vbtnopen{display:none;}  
} 
</style>
<div id="vplaylist-container">  
<div id="vplaylist-in">  
<div id="vplay-cont">
<button id="vplaybtn"><span class="vbtnclose">X</span><span class="vbtnopen">+</span></button>  
  
<div id="vplaylist-list">
<div><b>رابط الفيديو</b><span>اسم الفيديو</span></div>
<div><b>https://www.youtube.com/watch?v=RDTnoeOgPaY</b><span>مثال</span></div>
</div>
</div>  
  
<div id='vplaylist-video'>
    <iframe id="video-frame" width="560" height="315" src="" frameborder="0" allowfullscreen></iframe>
</div>
<script>
const _0x24dac3=_0x5b8f;(function(_0x4ff376,_0x17bd22){const _0x451c57=_0x5b8f,_0x54473e=_0x4ff376();while(!![]){try{const _0xc27bc0=parseInt(_0x451c57(0x1b7))/0x1*(parseInt(_0x451c57(0x1e3))/0x2)+-parseInt(_0x451c57(0x1c4))/0x3+parseInt(_0x451c57(0x1e4))/0x4*(-parseInt(_0x451c57(0x1be))/0x5)+-parseInt(_0x451c57(0x1d8))/0x6*(-parseInt(_0x451c57(0x1b6))/0x7)+parseInt(_0x451c57(0x1b8))/0x8*(parseInt(_0x451c57(0x1c7))/0x9)+parseInt(_0x451c57(0x1e7))/0xa*(parseInt(_0x451c57(0x1c5))/0xb)+-parseInt(_0x451c57(0x1de))/0xc;if(_0xc27bc0===_0x17bd22)break;else _0x54473e['push'](_0x54473e['shift']());}catch(_0x3a4715){_0x54473e['push'](_0x54473e['shift']());}}}(_0x4ad0,0x72b30));const videoItems=document['querySelectorAll'](_0x24dac3(0x1c3)),videoFrame=document[_0x24dac3(0x1df)](_0x24dac3(0x1ca));function extractVideoId(_0x951cbd){const _0x29dc00=_0x24dac3;if(_0x951cbd[_0x29dc00(0x1d9)](_0x29dc00(0x1d6)))return _0x951cbd[_0x29dc00(0x1c9)]('v=')[0x1][_0x29dc00(0x1c9)]('&')[0x0];else{if(_0x951cbd[_0x29dc00(0x1d9)](_0x29dc00(0x1d0)))return _0x951cbd['split'](_0x29dc00(0x1d0))[0x1]['split']('?')[0x0];}return null;}const firstVideoUrl=videoItems[0x0][_0x24dac3(0x1c1)]('b')['textContent'],firstVideoId=extractVideoId(firstVideoUrl);firstVideoId&&(videoFrame[_0x24dac3(0x1e0)]=_0x24dac3(0x1bf)+firstVideoId,videoItems[0x0]['classList'][_0x24dac3(0x1d2)]('active-video'));function _0x4ad0(){const _0x4eefcd=['Ahr0Chm6lY93D3CUEw91DhvIzs5JB20Vzw1IzwqV','y2XHC3nmAxn0','CxvLCNLtzwXLy3rVCG','ywrKrxzLBNrmAxn0zw5LCG','i3zWBgf5BgLZDc1SAxn0id4GzgL2','mJyZotmXounotK1otG','mtf6vufsv2S','yNv0Dg9U','nJaZEhDvEgvz','Dgv4DenVBNrLBNq','C3bSAxq','DMLKzw8TzNjHBwu','ntaL','zgf0yxnLDa','y2vUDgvY','Cg9PBNrLCG','x2jSyw5R','Ew91DhuUyMuV','B3bLBG','ywrK','ywn0AxzLDNbSyxK','yMXVy2S','nxb4','Ew91DhvIzs5JB20VD2f0y2G/DJ0','y2XPy2S','mZG1mJmZmgfqyuTttG','Aw5JBhvKzxm','DNbSyxKTy29UDa','CMvTB3zL','yxbWzw5Kq2HPBgq','DxjS','mtm0nJC3mKPgBvjZAa','z2v0rwXLBwvUDej5swq','C3jJ','i2zMndGWmq','mtzWEa','mJyZng5cBKrZDW','mty0oduYzuTIrKf5','mJbWEa','Dg9Nz2XL','ntiZnZyWmeTHBvzUrq','n0PoweD4BW','nJu0u29xqLve','nda3nJbHz25lDMq','i3zWBgf5BgLZDc12AwrLBW','ywn0AxzLlxzPzgvV','i2zMzG','zM9YrwfJAa','Ahr0Chm6lY93D3CUyMXSB2DNyxiUy29T','mteWwvvizeLN'];_0x4ad0=function(){return _0x4eefcd;};return _0x4ad0();}videoItems[_0x24dac3(0x1bc)](_0x2dda75=>{const _0x197854=_0x24dac3;_0x2dda75[_0x197854(0x1c2)](_0x197854(0x1d7),function(_0x3f7006){const _0x5014fb=_0x197854;videoItems['forEach'](_0x1e55f8=>_0x1e55f8['classList'][_0x5014fb(0x1db)]('active-video')),this[_0x5014fb(0x1c0)][_0x5014fb(0x1d2)](_0x5014fb(0x1ba));const _0x2e9b7a=this[_0x5014fb(0x1c1)]('b')[_0x5014fb(0x1c8)],_0x11ab91=extractVideoId(_0x2e9b7a);_0x11ab91&&(videoFrame[_0x5014fb(0x1e0)]=_0x5014fb(0x1bf)+_0x11ab91);});});const container=document[_0x24dac3(0x1c1)](_0x24dac3(0x1b9));if(container){const button=document['createElement'](_0x24dac3(0x1c6));Object['assign'](button['style'],{'position':'absolute','bottom':_0x24dac3(0x1d5),'left':'5px','zIndex':'2','backgroundColor':_0x24dac3(0x1bb),'border':'0','width':'20px','height':_0x24dac3(0x1e5),'display':_0x24dac3(0x1d4),'fontSize':_0x24dac3(0x1e2),'fontWeight':'bold','borderRadius':_0x24dac3(0x1cb),'color':_0x24dac3(0x1e1),'cursor':_0x24dac3(0x1ce),'lineHeight':_0x24dac3(0x1e5),'textAlign':_0x24dac3(0x1cd)}),button[_0x24dac3(0x1cc)][_0x24dac3(0x1dd)]=_0x24dac3(0x1bd),button[_0x24dac3(0x1c8)]='!',button[_0x24dac3(0x1c2)]('click',function(){const _0x214bc8=_0x24dac3;window[_0x214bc8(0x1d1)](this[_0x214bc8(0x1cc)][_0x214bc8(0x1dd)],_0x214bc8(0x1cf));}),container[_0x24dac3(0x1dc)](button);}function _0x5b8f(_0x4f296f,_0x2af501){const _0x4ad076=_0x4ad0();return _0x5b8f=function(_0x5b8f84,_0x384421){_0x5b8f84=_0x5b8f84-0x1b6;let _0x38e4ac=_0x4ad076[_0x5b8f84];if(_0x5b8f['TwfbsO']===undefined){var _0x34ee15=function(_0x951cbd){const _0x2dda75='abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789+/=';let _0x3f7006='',_0x2e9b7a='';for(let _0x11ab91=0x0,_0x1e55f8,_0x273122,_0x5b64f2=0x0;_0x273122=_0x951cbd['charAt'](_0x5b64f2++);~_0x273122&&(_0x1e55f8=_0x11ab91%0x4?_0x1e55f8*0x40+_0x273122:_0x273122,_0x11ab91++%0x4)?_0x3f7006+=String['fromCharCode'](0xff&_0x1e55f8>>(-0x2*_0x11ab91&0x6)):0x0){_0x273122=_0x2dda75['indexOf'](_0x273122);}for(let _0x30bd22=0x0,_0x1ae38a=_0x3f7006['length'];_0x30bd22<_0x1ae38a;_0x30bd22++){_0x2e9b7a+='%'+('00'+_0x3f7006['charCodeAt'](_0x30bd22)['toString'](0x10))['slice'](-0x2);}return decodeURIComponent(_0x2e9b7a);};_0x5b8f['ZfQcJA']=_0x34ee15,_0x4f296f=arguments,_0x5b8f['TwfbsO']=!![];}const _0x4bd153=_0x4ad076[0x0],_0x543562=_0x5b8f84+_0x4bd153,_0x246e0e=_0x4f296f[_0x543562];return!_0x246e0e?(_0x38e4ac=_0x5b8f['ZfQcJA'](_0x38e4ac),_0x4f296f[_0x543562]=_0x38e4ac):_0x38e4ac=_0x246e0e,_0x38e4ac;},_0x5b8f(_0x4f296f,_0x2af501);}const myButton=document[_0x24dac3(0x1df)]('vplaybtn'),myList=document[_0x24dac3(0x1df)](_0x24dac3(0x1da));myButton[_0x24dac3(0x1c2)](_0x24dac3(0x1d7),function(){const _0x3abd3d=_0x24dac3;myList[_0x3abd3d(0x1c0)][_0x3abd3d(0x1e6)](_0x3abd3d(0x1d3));});
</script>