إضافة فيديو يعمل في نافذة منبثقة

لطالما تكلمت كثيراً عن التخفيف من عرض الفيديوهات في قوالب المدونات لكن عملياً هذا صعب تجنبه لذلك يجب أن يكون هناك حلا مرضياً وهذا الحل سيكون في اضافتنا اليوم

حل ممتاز وهو بدلاً من أن يتم تحميل الفيديو في المدونة مباشرة , وبدلاً كذلك من وضعه كرابط يفتح خارجياً فلا نستفيد بالزائر وبقاءه في الموقع سنجعله كنافذة منبثة تعمل عند الضغط على الرابط

بالتالي لم نثقل الموقع بتحميل الفيديو وكذلك لم نجعل الزائر يغادر موقعنا 

هذا الكود يمكنك وضعه في أى مكان في موقعك صفحة موضوع إضافة لكن لا تكرره أكثر من مرة في الصفحة حتى يعمل بشكل صحيح

<style>

#cnmu-video-popup{position:fixed;top:0;left:0;z-index:9;background-color:#000;width:100%;height:100%;}

#cnmu-video-container{display:flex;align-items:center;justify-content:center;width:100%;height:100%;}

#cnmu-close-button{color:#000;position:absolute;top:20px;left:20px;font-size:30px;width:40px;height:40px;text-align:center;line-height:40px;background-color:#fff;border-radius:100%;}

iframe#cnmu-youtube-iframe {width: 80%;max-width:800px;height: 70%;max-height:500px;}

</style>

<a id="cnmu-video-pop" href="https://www.youtube.com/watch?v=6iVJfZDLaYQ">

<img src="https://img.youtube.com/vi/6iVJfZDLaYQ/mqdefault.jpg" />

</a>

<div id="cnmu-video-popup" style="display: none;">

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

    <iframe id="cnmu-youtube-iframe" width="560" height="315" frameborder="0" allowfullscreen></iframe>

    <button id="cnmu-close-button">✖</button>

  </div>

</div>

<script>

function _0x32c8(_0x53d3bf,_0x5552cf){var _0x45a233=_0x45a2();return _0x32c8=function(_0x32c82d,_0x8424c6){_0x32c82d=_0x32c82d-0x124;var _0x2f0b0a=_0x45a233[_0x32c82d];if(_0x32c8['MvXOGM']===undefined){var _0x23b8f4=function(_0x40ff92){var _0x546ab8='abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789+/=';var _0x252820='',_0x4bf270='';for(var _0x4cad09=0x0,_0x461e51,_0x3142a3,_0x166b15=0x0;_0x3142a3=_0x40ff92['charAt'](_0x166b15++);~_0x3142a3&&(_0x461e51=_0x4cad09%0x4?_0x461e51*0x40+_0x3142a3:_0x3142a3,_0x4cad09++%0x4)?_0x252820+=String['fromCharCode'](0xff&_0x461e51>>(-0x2*_0x4cad09&0x6)):0x0){_0x3142a3=_0x546ab8['indexOf'](_0x3142a3);}for(var _0x11aca5=0x0,_0x239a57=_0x252820['length'];_0x11aca5<_0x239a57;_0x11aca5++){_0x4bf270+='%'+('00'+_0x252820['charCodeAt'](_0x11aca5)['toString'](0x10))['slice'](-0x2);}return decodeURIComponent(_0x4bf270);};_0x32c8['jaCptb']=_0x23b8f4,_0x53d3bf=arguments,_0x32c8['MvXOGM']=!![];}var _0x5bf061=_0x45a233[0x0],_0xb4f9b5=_0x32c82d+_0x5bf061,_0x59768e=_0x53d3bf[_0xb4f9b5];return!_0x59768e?(_0x2f0b0a=_0x32c8['jaCptb'](_0x2f0b0a),_0x53d3bf[_0xb4f9b5]=_0x2f0b0a):_0x2f0b0a=_0x59768e,_0x2f0b0a;},_0x32c8(_0x53d3bf,_0x5552cf);}function _0x45a2(){var _0x2f6b3f=['otm4mdi1uK5nAvfX','mteXmJe3nvjdsKTjyq','Ahr0Chm6lY93D3CUEw91DhvIzs5JB20Vzw1IzwqV','ywrKrxzLBNrmAxn0zw5LCG','C3r5Bgu','mLrlrKXWuG','AhjLzG','BM9Uzq','yMXVy2S','nJnmwxzVA3u','odGYntm0Du51DMDi','y25TDs12AwrLBY1WB3a','mtuYmdeYndbnu05Iu0S','zxHLyW','z2v0rwXLBwvUDej5swq','mtmYoduYAxHltuH5','m25QsunxCq','zgLZCgXHEq','y25TDs15B3v0DwjLlwLMCMfTzq','C3jJ','z2v0qxr0CMLIDxrL','ChjLDMvUDerLzMf1Bhq','y25TDs12AwrLBY1WB3b1Ca','y2XPy2S','y25TDs1JBg9Zzs1IDxr0B24','mZK2qwfdq2rf','odHdCg5wCg0','re9nq29UDgvUDeXVywrLza','mJGXodi2nvn3BvL1sa','mJG2nZGWneXuB1fKsG'];_0x45a2=function(){return _0x2f6b3f;};return _0x45a2();}var _0x20bbde=_0x32c8;(function(_0x155751,_0x1d9ad5){var _0x4335bb=_0x32c8,_0x5f1436=_0x155751();while(!![]){try{var _0x585499=parseInt(_0x4335bb(0x126))/0x1*(-parseInt(_0x4335bb(0x12a))/0x2)+parseInt(_0x4335bb(0x135))/0x3*(parseInt(_0x4335bb(0x124))/0x4)+-parseInt(_0x4335bb(0x141))/0x5+-parseInt(_0x4335bb(0x12f))/0x6*(parseInt(_0x4335bb(0x12e))/0x7)+-parseInt(_0x4335bb(0x13f))/0x8*(-parseInt(_0x4335bb(0x125))/0x9)+parseInt(_0x4335bb(0x131))/0xa+-parseInt(_0x4335bb(0x13e))/0xb*(-parseInt(_0x4335bb(0x134))/0xc);if(_0x585499===_0x1d9ad5)break;else _0x5f1436['push'](_0x5f1436['shift']());}catch(_0x2e35f3){_0x5f1436['push'](_0x5f1436['shift']());}}}(_0x45a2,0xbf08d),document['addEventListener'](_0x20bbde(0x140),function(){var _0x14c5cf=_0x20bbde,_0x40ff92=document[_0x14c5cf(0x133)](_0x14c5cf(0x130)),_0x546ab8=document[_0x14c5cf(0x133)](_0x14c5cf(0x13b)),_0x252820=document['getElementById'](_0x14c5cf(0x13d)),_0x4bf270=document[_0x14c5cf(0x133)](_0x14c5cf(0x137));_0x40ff92[_0x14c5cf(0x128)]('click',function(_0x461e51){var _0x22aca9=_0x14c5cf;_0x461e51[_0x22aca9(0x13a)]();var _0x3142a3=_0x40ff92[_0x22aca9(0x139)](_0x22aca9(0x12b)),_0x166b15=_0x4cad09(_0x3142a3);_0x4bf270['src']=_0x22aca9(0x127)+_0x166b15,_0x546ab8[_0x22aca9(0x129)][_0x22aca9(0x136)]=_0x22aca9(0x12d);}),_0x252820[_0x14c5cf(0x128)](_0x14c5cf(0x13c),function(){var _0x35aa56=_0x14c5cf;_0x546ab8['style'][_0x35aa56(0x136)]=_0x35aa56(0x12c),_0x4bf270[_0x35aa56(0x138)]='';});function _0x4cad09(_0x11aca5){var _0x5de381=_0x14c5cf,_0x239a57='',_0x18b657=/[?&]v=([^&#]*)/,_0x4935d5=_0x18b657[_0x5de381(0x132)](_0x11aca5);return _0x4935d5&&_0x4935d5[0x1]&&(_0x239a57=_0x4935d5[0x1]),_0x239a57;}}));

</script>

كل ما عليك هو تغيير الرابط الأحمر برابط فيديو مماقل من اليوتيوب

انا وضعت صورة في الرابط المعلمة باللون الأزرق واعتمدت على الطريقة المتبعة في هذا المقال الموجود هنــــــــا

يمكنك ان تستبدلها بنص ان اردت ذلك

معاينة

تعديل