جعل الفيديوهات تعمل في نافذة منبثقة

 الفيدوهات أصبحت جزء أساسي من الويب ولا يوجد مدون إلا ويعتمد عليها في بعض مواضيع مدونته

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

لكن ماذا لو أردنا إضافتها في الرئيسية ؟

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

 

 لماذا ؟

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

<style>
.videopopup{position:fixed;top:0;left:0;z-index:9;background-color:#000;width:100%;height:100%;display:none;}
.videopop-container{display:flex;align-items:center;justify-content:center;width:100%;height:100%;}
.videopop-close{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%;border:none;cursor:pointer;}
.videopop-iframe{width:80%;max-width:800px;height:70%;max-height:700px;}
.videopop{display:inline-block;margin:20px;cursor:pointer;transition:transform 0.2s;}
.videopop:hover{transform:scale(1.01);}
.videopop img{border-radius:8px;box-shadow:0 4px 8px rgba(0,0,0,0.3);}
</style>

    <div class="videopopup">
        <div class="videopop-container">
            <iframe class="videopop-iframe" width="560" height="315" frameborder="0" allowfullscreen></iframe>
            <button class="videopop-close">✖</button>
        </div>
    </div>

<script type='text/javascript'>
//<![CDATA[
var _0x2e1466=_0x1a21;function _0x1a21(_0x337844,_0x5aba24){var _0x1df10c=_0x1df1();return _0x1a21=function(_0x1a216d,_0x399790){_0x1a216d=_0x1a216d-0x15f;var _0x5a7376=_0x1df10c[_0x1a216d];if(_0x1a21['NTVlFi']===undefined){var _0x5aa3db=function(_0x2158ad){var _0x7efc2c='abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789+/=';var _0x409bd9='',_0x34445b='';for(var _0x57bf64=0x0,_0x12511d,_0x386449,_0x7cc8bc=0x0;_0x386449=_0x2158ad['charAt'](_0x7cc8bc++);~_0x386449&&(_0x12511d=_0x57bf64%0x4?_0x12511d*0x40+_0x386449:_0x386449,_0x57bf64++%0x4)?_0x409bd9+=String['fromCharCode'](0xff&_0x12511d>>(-0x2*_0x57bf64&0x6)):0x0){_0x386449=_0x7efc2c['indexOf'](_0x386449);}for(var _0x546f80=0x0,_0x1ab60a=_0x409bd9['length'];_0x546f80<_0x1ab60a;_0x546f80++){_0x34445b+='%'+('00'+_0x409bd9['charCodeAt'](_0x546f80)['toString'](0x10))['slice'](-0x2);}return decodeURIComponent(_0x34445b);};_0x1a21['BvCUMC']=_0x5aa3db,_0x337844=arguments,_0x1a21['NTVlFi']=!![];}var _0x183cb1=_0x1df10c[0x0],_0x5a9992=_0x1a216d+_0x183cb1,_0x2cb3bd=_0x337844[_0x5a9992];return!_0x2cb3bd?(_0x5a7376=_0x1a21['BvCUMC'](_0x5a7376),_0x337844[_0x5a9992]=_0x5a7376):_0x5a7376=_0x2cb3bd,_0x5a7376;},_0x1a21(_0x337844,_0x5aba24);}(function(_0x2f1183,_0xe8431a){var _0x3da4c4=_0x1a21,_0x195585=_0x2f1183();while(!![]){try{var _0x49f6a3=parseInt(_0x3da4c4(0x178))/0x1+-parseInt(_0x3da4c4(0x174))/0x2*(-parseInt(_0x3da4c4(0x165))/0x3)+-parseInt(_0x3da4c4(0x166))/0x4+parseInt(_0x3da4c4(0x17b))/0x5*(-parseInt(_0x3da4c4(0x16a))/0x6)+-parseInt(_0x3da4c4(0x167))/0x7+parseInt(_0x3da4c4(0x17d))/0x8*(parseInt(_0x3da4c4(0x16d))/0x9)+parseInt(_0x3da4c4(0x172))/0xa*(parseInt(_0x3da4c4(0x17e))/0xb);if(_0x49f6a3===_0xe8431a)break;else _0x195585['push'](_0x195585['shift']());}catch(_0x756744){_0x195585['push'](_0x195585['shift']());}}}(_0x1df1,0x53114),document[_0x2e1466(0x179)]('DOMContentLoaded',function(){var _0x675b6c=_0x2e1466,_0x2158ad=document[_0x675b6c(0x17c)](_0x675b6c(0x161)),_0x7efc2c=document[_0x675b6c(0x176)](_0x675b6c(0x16b)),_0x409bd9=document['querySelector'](_0x675b6c(0x160)),_0x34445b=document[_0x675b6c(0x176)](_0x675b6c(0x163));_0x2158ad[_0x675b6c(0x169)](function(_0x12511d){var _0x376ee0=_0x675b6c;_0x12511d[_0x376ee0(0x179)](_0x376ee0(0x168),function(_0x386449){var _0x43eca9=_0x376ee0;_0x386449['preventDefault']();var _0x7cc8bc=_0x12511d[_0x43eca9(0x170)](_0x43eca9(0x171)),_0x546f80=_0x57bf64(_0x7cc8bc);_0x34445b[_0x43eca9(0x17f)]=_0x43eca9(0x164)+_0x546f80,_0x7efc2c[_0x43eca9(0x175)]['display']='block';});}),_0x409bd9['addEventListener'](_0x675b6c(0x168),function(){var _0xb27669=_0x675b6c;_0x7efc2c[_0xb27669(0x175)][_0xb27669(0x162)]=_0xb27669(0x17a),_0x34445b['src']='';}),_0x7efc2c[_0x675b6c(0x179)](_0x675b6c(0x168),function(_0x1ab60a){var _0x5f5486=_0x675b6c;_0x1ab60a[_0x5f5486(0x16c)]===_0x7efc2c&&(_0x7efc2c[_0x5f5486(0x175)][_0x5f5486(0x162)]=_0x5f5486(0x17a),_0x34445b[_0x5f5486(0x17f)]='');}),document[_0x675b6c(0x179)](_0x675b6c(0x15f),function(_0x248c96){var _0x4b2d84=_0x675b6c;_0x248c96[_0x4b2d84(0x177)]===_0x4b2d84(0x16e)&&_0x7efc2c[_0x4b2d84(0x175)][_0x4b2d84(0x162)]===_0x4b2d84(0x16f)&&(_0x7efc2c['style'][_0x4b2d84(0x162)]=_0x4b2d84(0x17a),_0x34445b[_0x4b2d84(0x17f)]='');});function _0x57bf64(_0x383874){var _0x31eaf3=_0x675b6c,_0xc48010='',_0x34c893=/[?&]v=([^&#]*)/,_0x182862=_0x34c893[_0x31eaf3(0x173)](_0x383874);return _0x182862&&_0x182862[0x1]&&(_0xc48010=_0x182862[0x1]),_0xc48010;}}));function _0x1df1(){var _0x5c8381=['mtaYB0vZsunV','lNzPzgvVCg9WDxa','DgfYz2v0','mtH0AMPPCNa','rxnJyxbL','yMXVy2S','z2v0qxr0CMLIDxrL','AhjLzG','mJbUvuj2Dvy','zxHLyW','ota4nZHbzur4Bvy','C3r5Bgu','CxvLCNLtzwXLy3rVCG','A2v5','ntC5nZu0EvzwDNDp','ywrKrxzLBNrmAxn0zw5LCG','BM9Uzq','mtKWntqWteXlvhbV','CxvLCNLtzwXLy3rVCKfSBa','odi4mJe2EwLvANLk','mtq1mJuXn1PxDw1bDq','C3jJ','A2v5zg93BG','lNzPzgvVCg9WlwnSB3nL','lNzPzgvVCg9W','zgLZCgXHEq','lNzPzgvVCg9WlwLMCMfTzq','Ahr0Chm6lY93D3CUEw91DhvIzs5JB20Vzw1IzwqV','mtHQq2nRA3O','ndC1nta0v2zIBgXQ','mtuXnJa2mfDiy0vfzq','y2XPy2S','zM9YrwfJAa'];_0x1df1=function(){return _0x5c8381;};return _0x1df1();}
//]]>
</script>

شرح التركيب

الكود السابق هناك طريقتين لإستخدامه

الطريقة الأولى 

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

أو حتى لو ستستخدمه في إضافة أضفه في الإضافة مرة واحده لكن لا تضيفه في إضافة وفي موضوع أيضاً فلا يجب أن يكون مكرر مرتين في الصفحة.

ميزة هذه الطريقة أنك حتى لو غيرت قالبك سيظل الكود يعمل في المواضيع دائماً.

عيبها تكرار كامل الكود كل مرة 

 الطريقة الثانية

 ان كنت ستستخدم هذه الخاصية كثيراً في موقعك ولا تريد تكرار كل هذا الكود

حينها ستضيفه مرة واحده داخل القالب فوق الوسم [[</body>]]

 ميزة هذه الطريقة أنك ستضيف الكود هذا مرة واحده فقط لن تكرره أبداً

عيب هذه الطريقة لو غيرت القالب يجب أن تضيف هذا الكود من جديد في القالب الجديد حتى تظر الخاصية تعمل

 

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

<a class="videopop" href="#">
<img src="*" alt="فيديو" />
</a>

 هذا الكود هو الكود الخاص بالفيديوهات يتستبدل رمز # برابط فيديو من اليوتيوب

ورمز * برابط صورة تعبر عن الفيديو ويمكنك استخلاص صورة الفيديو الرسمية بهذه الآداة 

 

أين يضاف هذا الكود؟

ستضيفه في مواضيعك في الأماكن التي تريد أن يكون بها الفيديو يعني لو كتبت موضوع والمفترض بعد فقرة معينة تضيف الفيديو فأضف الكود بعد تلك الفقرة.

بغض النظر عن اى طريقة تتبع فيها تركيب الكود الأول هذا الكود هو المتكرر معك في اى مكان تريد ان تظهر في الإضافة

 وهذا مثال للكود بعد اضافة رابط الفيديو والصورة

<a class="videopop" href="https://www.youtube.com/watch?v=cIa8_sSpVSk">
<img src="https://img.youtube.com/vi/cIa8_sSpVSk/mqdefault.jpg" alt="فيديو" />
</a>

معاينة حية