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

 كنا أضفنا من قبل طريقة عمل مشغل صوتيات والآن نكمل الأمر بصناعة مشغل فيديوهات يمكنك من خلاله عمل قائمة تشغيل للفديوهات على اليويتوب وانت هنا من يحدد الفديو ويمكنك تحديد فيديوهات من عدة قنوات ولست ملزم بقناة واحدة

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

<style>

#cnmu-video-container{--video-bordcolr:#222;}

#cnmu-video-in{display:grid;grid-template-columns:minmax(100px,200px) minmax(200px,1fr);gap:10px;background-color:#000;padding:10px;border-radius:4px 4px 0 0;border-style:solid;border-width:10px 10px 2px 10px;border-color:var(--video-bordcolr);height:360px;}

#cnmu-video-list{display:flex;flex-direction:column;gap:5px;height:100%;overflow-x:auto;background-color:rgba(255,255,255,.1);padding:5px;}

#cnmu-video-list a{color:#fff!important;text-decoration:none!important;height:30px;overflow:hidden;position:relative;display:block;flex-shrink:0;white-space:nowrap;text-overflow:ellipsis;}

#cnmu-video-list .active-video{background-color:red;}

#cnmu-video #video-frame{width:100%;height:100%;}

#cnmu-video-container > strong{display:block;background-color:var(--video-bordcolr);border-radius:0 0 4px 4px;margin:-1px 0 0;color:#fff;text-align:center;padding:10px;font-size:110%;font-weight:normal;} 

</style>

<div id="cnmu-video-container">  

<div id="cnmu-video-in">  

<div id="cnmu-video-list">

<a href="#">اسم الفيديو</a>

</div>

  

<div id='cnmu-video'>

    <iframe id="video-frame" width="560" height="315" src="" frameborder="0" allowfullscreen></iframe>

</div>

<script>

const _0x39b6cd=_0x5ca3;(function(_0x338b3b,_0x37390e){const _0x3b0796=_0x5ca3,_0x394068=_0x338b3b();while(!![]){try{const _0x28b140=-parseInt(_0x3b0796(0x152))/0x1+-parseInt(_0x3b0796(0x15a))/0x2+-parseInt(_0x3b0796(0x160))/0x3*(-parseInt(_0x3b0796(0x153))/0x4)+parseInt(_0x3b0796(0x163))/0x5+parseInt(_0x3b0796(0x150))/0x6+parseInt(_0x3b0796(0x15e))/0x7*(parseInt(_0x3b0796(0x155))/0x8)+-parseInt(_0x3b0796(0x157))/0x9*(parseInt(_0x3b0796(0x15b))/0xa);if(_0x28b140===_0x37390e)break;else _0x394068['push'](_0x394068['shift']());}catch(_0x5e1c9a){_0x394068['push'](_0x394068['shift']());}}}(_0x308c,0x25343));const videoList=document[_0x39b6cd(0x161)](_0x39b6cd(0x165)),videoFrame=document[_0x39b6cd(0x162)](_0x39b6cd(0x156)),firstVideoId=videoList[0x0][_0x39b6cd(0x15d)]['split']('v=')[0x1];function _0x308c(){const _0x2f5314=['mta1nJm4zgDxtfLr','mZyYntKWBMX1shjT','Ahr0Chm6lY93D3CUEw91DhvIzs5JB20Vzw1IzwqV','AhjLzG','ntCWnZe3BhvPquX3','ywn0AxzLlxzPzgvV','oxDzuw1ZAW','CxvLCNLtzwXLy3rVCKfSBa','z2v0rwXLBwvUDej5swq','mtK4nJbYvLHPDwO','y2XHC3nmAxn0','i2nUBxuTDMLKzw8TBgLZDcbH','C3jJ','ywrKrxzLBNrmAxn0zw5LCG','ywrK','CMvTB3zL','mtaXndyWmg9hqKDbBW','y2XPy2S','mtuXmJy0wgjKCwnc','mtG0mty4uuPcu0fJ','ChjLDMvUDerLzMf1Bhq','ohLoCgnMva','DMLKzw8TzNjHBwu','ouvtrvfuqW','C3bSAxq','zM9YrwfJAa'];_0x308c=function(){return _0x2f5314;};return _0x308c();}function _0x5ca3(_0x3eaa74,_0x529c27){const _0x308ca9=_0x308c();return _0x5ca3=function(_0x5ca3a1,_0x237c8c){_0x5ca3a1=_0x5ca3a1-0x150;let _0x3dc4d9=_0x308ca9[_0x5ca3a1];if(_0x5ca3['HpBbld']===undefined){var _0x2d9470=function(_0x5b4948){const _0x119283='abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789+/=';let _0x1b7b2a='',_0x252999='';for(let _0x58f695=0x0,_0x180653,_0x276cf0,_0x454c03=0x0;_0x276cf0=_0x5b4948['charAt'](_0x454c03++);~_0x276cf0&&(_0x180653=_0x58f695%0x4?_0x180653*0x40+_0x276cf0:_0x276cf0,_0x58f695++%0x4)?_0x1b7b2a+=String['fromCharCode'](0xff&_0x180653>>(-0x2*_0x58f695&0x6)):0x0){_0x276cf0=_0x119283['indexOf'](_0x276cf0);}for(let _0x304f51=0x0,_0x4a247c=_0x1b7b2a['length'];_0x304f51<_0x4a247c;_0x304f51++){_0x252999+='%'+('00'+_0x1b7b2a['charCodeAt'](_0x304f51)['toString'](0x10))['slice'](-0x2);}return decodeURIComponent(_0x252999);};_0x5ca3['QEypCA']=_0x2d9470,_0x3eaa74=arguments,_0x5ca3['HpBbld']=!![];}const _0x5b7f3c=_0x308ca9[0x0],_0x1fe3a3=_0x5ca3a1+_0x5b7f3c,_0x53dac5=_0x3eaa74[_0x1fe3a3];return!_0x53dac5?(_0x3dc4d9=_0x5ca3['QEypCA'](_0x3dc4d9),_0x3eaa74[_0x1fe3a3]=_0x3dc4d9):_0x3dc4d9=_0x53dac5,_0x3dc4d9;},_0x5ca3(_0x3eaa74,_0x529c27);}videoFrame[_0x39b6cd(0x166)]=_0x39b6cd(0x15c)+firstVideoId,videoList[0x0][_0x39b6cd(0x164)][_0x39b6cd(0x168)](_0x39b6cd(0x15f)),videoList[_0x39b6cd(0x159)](_0x5b4948=>{const _0x5a1c64=_0x39b6cd;_0x5b4948[_0x5a1c64(0x167)](_0x5a1c64(0x151),function(_0x119283){const _0x23ab7a=_0x5a1c64;_0x119283[_0x23ab7a(0x154)](),videoList['forEach'](_0x252999=>_0x252999['classList'][_0x23ab7a(0x169)]('active-video')),this[_0x23ab7a(0x164)][_0x23ab7a(0x168)](_0x23ab7a(0x15f));const _0x1b7b2a=this['href'][_0x23ab7a(0x158)]('v=')[0x1];videoFrame[_0x23ab7a(0x166)]=_0x23ab7a(0x15c)+_0x1b7b2a;});});

</script>

</div>

  <strong>اسم قائمة التشغيل</strong>

</div>

شرح الإستخدام

- عدل الكلمات العربية بما تريد

- الكود المعلم بالأحمر هذا هو كود الفيديو كرره كلما أردت ان تضيف فيديو للقائمة

واستبدل رمز # فيه برابط فيديو من اليوتيوب على شرط ان يكون الرابط بذلك الشكل ينتهي بمعرف الفديو في اليوتيوب

https://www.youtube.com/watch?v=BmEFz-2aZmU

- الرقم 360 هو ارتفاع الإضافة عدله بما تريد

- اللون #222 لون الإضافة الخارجي للمشغل

تنويه : لا أحل استخدام الإضافة في شئ يغضب الله مثل الأغاني والمسلسلات وما يخالف الشريعة الإسلامية

• 💢
• معاينة