جعل جميع الفيديوهات تعمل في نافذة منبثقة في بلوجر؟
في عالم التدوين الحديث، لم يعد المحتوى النصي وحده كافيًا لجذب الزائر. أصبح من الضروري تقديم محتوى مرئي مثل الفيديوهات لزيادة التفاعل وتحسين تجربة المستخدم. لكن الطريقة التقليدية لعرض الفيديوهات داخل التدوينة قد لا تكون دائمًا الأفضل، خصوصًا إذا كانت تسبب بطء التصفح أو تشتيت تركيز الزائر.لهذا السبب، نقدم لك اليوم حلاً عمليًا واحترافيًا: سكربت يجعل جميع الفيديوهات تعمل في نافذة منبثقة (Popup) بمجرد النقر على رابط الفيديو، دون مغادرة الصفحة. هذا الحل يعمل بسلاسة على قوالب بلوجر ويضفي لمسة احترافية على مدونتك.
ما فائدة تشغيل الفيديو في نافذة منبثقة؟
تركيب هذا السكربت له عدة فوائد تقنية وتجريبية، منها:- تحسين تجربة المستخدم (User Experience)
- تقليل استهلاك الموارد وسرعة التحميل
- إبقاء المستخدم في التدوينة لفترة أطول
- إضافة لمسة تصميم احترافية
خطوات تركيب سكربت تشغيل الفيديوهات في نافذة منبثقة
سنشرح لك الآن خطوات تركيب السكربت على مدونتك بلوجر، دون الحاجة لأي إضافات خارجية أو تعديل كبير في القالب.
ندخل خلى المظهر ثم تعديل HTML و نبحث عن <head> و نضيف الكود التالي اسفله و هو خاص بمكتبة الايقونات اذا موجود بقالبك لا داعي لتركيبه
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css' rel='stylesheet'/>
ثم نبحث عن <head/> و نضيف الكود التالي اعلاه
<style>.popup-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.85);display:none;align-items:center;justify-content:center;z-index:9999}.popup-content{position:relative;width:80%;max-width:800px}.popup-content iframe{width:100%!important;height:450px!important;display:block}.popup-close{position:absolute;top:-30px;right:-64px;font-size:36px;color:white;cursor:pointer;padding:6px 9px 12px 9px;background:#ff8100;border-radius:26px}.popup-close:hover{background:#ff0000}.iframe-replaced{position:relative;cursor:pointer;display:inline-block;background-size:cover;background-position:center;width:100%;max-width:100%;aspect-ratio:16 / 9;border-radius:8px;overflow:hidden}.play-icon{font-size:35px;color:#ffffff;background:#ff0000;padding:30px;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;line-height:1;transition:transform 0.3s ease}.iframe-replaced:hover .play-icon{transform:translate(-50%,-50%) scale(1.1)}.iframe-replaced::after{content:"\f04b";font-family:"Font Awesome 6 Free";font-weight:900;font-size:60px;color:white;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;padding-left:6px}i.fas.fa-play.play-icon{width:100px}.play-text{position:absolute;top:15px;left:15px;background:linear-gradient(135deg,#ff0000,#ff8100);color:#fff;padding:8px 15px;border-radius:20px;font-size:16px;font-weight:bold;opacity:0;transition:opacity 0.3s ease,transform 0.3s ease;pointer-events:none;box-shadow:0 4px 8px rgba(0,0,0,0.2);transform:translateY(-10px)}.iframe-replaced:hover .play-text{opacity:1;transform:translateY(0)}</style><div class='popup-overlay' id='video-popup'><div class='popup-content'><span class='popup-close' id='video-popup-close'>×</span><iframe allow='autoplay; encrypted-media' allowfullscreen='true' frameborder='0' id='video-popup-iframe' src=''/></div></div><script type='text/javascript'>//<![CDATA[document.addEventListener("DOMContentLoaded",function(){const iframes = document.querySelectorAll('iframe');iframes.forEach(function(iframe){const src = iframe.src;if (src.includes('youtube.com/embed')){const videoId = src.split('/embed/')[1].split('?')[0];const thumbnail = `https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`;const wrapper = document.createElement('div');wrapper.className = 'iframe-replaced';wrapper.style.backgroundImage = `url(${thumbnail})`;wrapper.setAttribute('data-video-id',videoId);const playText = document.createElement('div');playText.className = 'play-text';playText.textContent = 'تشغيل الفيديو';wrapper.appendChild(playText);const icon = document.createElement('i');icon.className = 'fas fa-play play-icon';wrapper.appendChild(icon);iframe.parentNode.insertBefore(wrapper,iframe);iframe.style.display = 'none';}});document.addEventListener('click',function(e){const box = e.target.closest('.iframe-replaced');if (box){const videoId = box.getAttribute('data-video-id');const iframe = document.getElementById('video-popup-iframe');iframe.src = "https://www.youtube.com/embed/" + videoId + "?autoplay=1&rel=0";document.getElementById('video-popup').style.display = 'flex';document.body.style.overflow = 'hidden';}});document.getElementById('video-popup-close').addEventListener('click',function(){document.getElementById('video-popup').style.display = 'none';document.getElementById('video-popup-iframe').src = '';document.body.style.overflow = 'auto';});});//]]></script>
و ثم نقوم بالحفظ
و الان عند الدخول لاي فيديو بالمدونة الخاصة بك و الضغط على تشغيل الفيديو ستجد ان الفيديو سيظهر بنافذة منبثقة
و هذا الامر سيطبق على جميع الفيديوهات الموجودة سابقا و الجديدة كل ما عليك تركيب كود الفيديو بالموضوع و ستجد ان السكربت طبق عليه بدون اي مشكلة و لا اي تعديل اخر