كود لتحويل روابط الفيديو في المنتدى الى صور مصغرة قابلة للنقر وعند النقر عليها تفتح الفيديو في نافذة منبثقة

1- تحويل روابط الفيديو إلى صور مصغرة قابلة للنقر

يقوم الكود تلقائيًا بتحويل روابط فيديوهات YouTube، Dailymotion، وOK.ru في المنتدى إلى صور مصغرة تفاعلية، مما يجعل تجربة المشاهدة أكثر سلاسة وجاذبية.
:: مثال:

2- تشغيل الفيديوهات في نافذة منبثقة أنيقة

عند النقر على الصورة المصغرة، يتم فتح الفيديو في نافذة منبثقة احترافية تحتوي على زر إغلاق، مع دعم لقوائم التشغيل، وتصميم متجاوب مع جميع الأجهزة، بالإضافة إلى تأثيرات CSS رائعة.
:: مثال:

3- دعم قوائم التشغيل

يتيح الكود تشغيل قوائم التشغيل مباشرة داخل النافذة المنبثقة، مما يسهل متابعة المحتوى دون الحاجة للخروج من المنتدى.

أهلاً وسهلاً بجميع أعضاء وزوار منتدانا الأعزاء،نرحب بكم في هذا المكان المميز حيث نتبادل المعرفة والإبداع. ويسعدنا أن نقدم لكم اليوم كودًا جديدًا يضيف لمسة مميزة لتجربة تصفحكم في المنتدى. نأمل أن تجدوا فيه ما يسهل عليكم التفاعل ويجعل تجربة استخدام المنتدى أكثر متعة وفائدة!
هل ترغبون في عرض مقاطع YouTube، Dailymotion، وOk.ru في نافذة منبثقة جذابة؟
الآن أصبح بإمكانكم تحويل أي رابط فيديو إلى صورة مصغرة مع زر تشغيل رائع. وبمجرد النقر عليها، ستظهر النافذة المنبثقة لعرض الفيديو مباشرة داخل المنتدى!

مزايا هذا الكود:

تحويل تلقائي لروابط الفيديو إلى صور مصغرة
عرض الفيديوهات في نافذة منبثقة بدون الحاجة لمغادرة الصفحة
دعم منصات متعددة (YouTube - Dailymotion - Ok.ru)
تصميم جذاب ومتجاوب يعمل على جميع الأجهزة
تأثيرات بصرية أنيقة مثل تكبير الصورة وزر التشغيل المتحرك
إمكانية تشغيل الفيديوهات وقوائم التشغيل مباشرة داخل النافذة

توافق الكود مع جميع نسخ منتديات "أحلى منتدى"

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

طريقة إضافة الكود إلى المنتدى لوحة الإدارة ➝ عناصر إضافية ➝ إدارة أكواد JavaScript
العنوان (مثلاً: كود فتح الفيديو في النوافذ المنبثقة).
المكان، اختر المواضيع

صندوق الكود

/* ==========================================================
   ❖ التصميم من تنفيذ: جاك سبارو ⚓
   ❖ الموقع: https://zx303.blogspot.com/
   ❖ مدونة القرصان | جميع الحقوق محفوظة © 
   ❖ يُمنع إزالة أو تعديل الحقوق دون إذن المصمم.
   ========================================================== */

jQuery(document).ready(function () {
    var ancho = "530px";
    var alto = "298px";
    var defaultThumbnail = "https://i.servimg.com/u/f24/19/34/83/47/unname11.png"; // صورة بديلة لقائمة تشغيل Dailymotion
    var defaultThumbnail2 = "https://i.servimg.com/u/f24/19/34/83/47/1_jii012.jpg"; // صورة بديلة لقائمة تشغيل Dailymotion
          
    if (jQuery("#videoPopup").length === 0) {
        jQuery("body").append(`
            <div id="videoPopup" class="popup-overlay">
                <div class="popup-content video-popup-content">
                    <span class="close-popup">×</span>
                    <iframe id="videoFrame" width="100%" height="100%" frameborder="0" allowfullscreen></iframe>
                </div>
            </div>
        `);
    }

    // YouTube
    jQuery('.post-content a[href*="youtube.com/watch?v="], .block-content a[href*="youtube.com/watch?v="], .post a[href*="youtube.com/watch?v="]').each(function () {
        var href = jQuery(this).attr('href');
        var videoIdMatch = href.match(/v=([a-zA-Z0-9_-]{11})/);
        var playlistIdMatch = href.match(/list=([a-zA-Z0-9_-]+)/);

        if (videoIdMatch && !playlistIdMatch) {
            var videoId = videoIdMatch[1];
            var embedUrl = 'https://www.youtube.com/embed/' + videoId + "?autoplay=1";
            var thumbnailUrl = 'https://img.youtube.com/vi/' + videoId + '/hqdefault.jpg';
            var thumbnail = `
                <a href="#" class="open-popup" data-video="${embedUrl}">
                    <div class="video-thumbnail" style="background: url('${thumbnailUrl}') center/cover no-repeat; width: ${ancho}; height: ${alto};">
                        <div class="play-button"></div>
                    </div>
                </a>
            `;
            jQuery(this).replaceWith(thumbnail);
        } else if (playlistIdMatch) {
            var playlistId = playlistIdMatch[1];
            var embedUrl = 'https://www.youtube.com/embed?listType=playlist&list=' + playlistId + "&autoplay=1";
            var thumbnailUrl = 'https://img.youtube.com/vi/' + videoIdMatch[1] + '/hqdefault.jpg';
            var thumbnail = `
                <a href="#" class="open-popup" data-video="${embedUrl}">
                    <div class="video-thumbnail" style="background: url('${thumbnailUrl}') center/cover no-repeat; width: ${ancho}; height: ${alto};">
                        <div class="play-button"></div>
                    </div>
                </a>
            `;
            jQuery(this).replaceWith(thumbnail);
        }
    });

    // OK.ru
    jQuery('.post-content a[href*="ok.ru/video/"], .block-content a[href*="ok.ru/video/"], .post a[href*="ok.ru/video/"]').each(function () {
        var href = jQuery(this).attr('href');
        var videoIdMatch = href.match(/video\/(\d+)/);
        var playlistMatch = href.match(/playlist=([\w-]+)/);

        if (videoIdMatch && !playlistMatch) {
            var videoId = videoIdMatch[1];
            var embedUrl = 'https://ok.ru/videoembed/' + videoId + "?autoplay=1";
            var thumbnailUrl = 'https://ok.ru/dk?st.cmd=videoPreview&uid=' + videoId;

            var thumbnail = `
                <a href="#" class="open-popup" data-video="${embedUrl}">
                    <div class="video-thumbnail" style="background: url('${thumbnailUrl}'), url('${defaultThumbnail}') center/cover no-repeat; width: ${ancho}; height: ${alto};">
                        <div class="play-button"></div>
                    </div>
                </a>
            `;
            jQuery(this).replaceWith(thumbnail);
        } else if (playlistMatch) {
            var playlistId = playlistMatch[1];
            var embedUrl = 'https://ok.ru/videoembed?playlist=' + playlistId + "&autoplay=1";
            var thumbnailUrl = 'https://ok.ru/dk?st.cmd=videoPreview&uid=' + playlistId;

            var thumbnail = `
                <a href="#" class="open-popup" data-video="${embedUrl}">
                    <div class="video-thumbnail" style="background: url('${thumbnailUrl}'), url('${defaultThumbnail}') center/cover no-repeat; width: ${ancho}; height: ${alto};">
                        <div class="play-button"></div>
                    </div>
                </a>
            `;
            jQuery(this).replaceWith(thumbnail);
        }
    });

    // Dailymotion
    jQuery('.post-content a[href*="dailymotion.com/video/"], .block-content a[href*="dailymotion.com/video/"], .post a[href*="dailymotion.com/video/"], .post-content a[href*="dailymotion.com/playlist/"], .block-content a[href*="dailymotion.com/playlist/"], .post a[href*="dailymotion.com/playlist/"]').each(function () {
        var href = jQuery(this).attr('href');
        var videoIdMatch = href.match(/video\/([^?]+)/);
        var playlistIdMatch = href.match(/playlist\/([^?]+)/);

        if (videoIdMatch && !playlistIdMatch) {
            var videoId = videoIdMatch[1];
            var embedUrl = 'https://www.dailymotion.com/embed/video/' + videoId + "?autoplay=1";
            var thumbnailUrl = 'https://www.dailymotion.com/thumbnail/video/' + videoId;

            var thumbnail = `
                <a href="#" class="open-popup" data-video="${embedUrl}">
                    <div class="video-thumbnail" style="background: url('${thumbnailUrl}') center/cover no-repeat; width: ${ancho}; height: ${alto};">
                        <div class="play-button"></div>
                    </div>
                </a>
            `;
            jQuery(this).replaceWith(thumbnail);
        } else if (playlistIdMatch) {
            var playlistId = playlistIdMatch[1];
            var embedUrl = 'https://www.dailymotion.com/embed/playlist/' + playlistId + "?autoplay=1";
            var thumbnailUrl = defaultThumbnail2;

            var thumbnail = `
                <a href="#" class="open-popup" data-video="${embedUrl}">
                    <div class="video-thumbnail" style="background: url('${thumbnailUrl}') center/cover no-repeat; width: ${ancho}; height: ${alto};">
                        <div class="play-button"></div>
                    </div>
                </a>
            `;
            jQuery(this).replaceWith(thumbnail);
        }
    });

    // نافذة الفيديو
    jQuery(document).on("click", ".open-popup[data-video]", function (e) {
        e.preventDefault();
        var videoSrc = jQuery(this).data("video");
        jQuery("#videoFrame").attr("src", videoSrc);
        jQuery("#videoPopup").fadeIn().css("display", "flex");
    });

    // إغلاق الفيديو
    jQuery(document).on("click", ".close-popup, .popup-overlay", function (e) {
        if (e.target.classList.contains("popup-overlay") || e.target.classList.contains("close-popup")) {
            jQuery("#videoPopup").fadeOut();
            jQuery("#videoFrame").attr("src", "");
        }
    });

    // ملء الشاشة
    jQuery(document).on("click", "#fullscreenBtn", function () {
        var popupContent = document.querySelector(".video-popup-content");
        if (!document.fullscreenElement) {
            popupContent.requestFullscreen();
        } else {
            document.exitFullscreen();
        }
    });

    // زر إغلاق يظهر عند تمرير الماوس
    document.addEventListener("DOMContentLoaded", function () {
        const popupContent = document.querySelector(".popup-content");
        const closeButton = document.querySelector(".close-popup");
        closeButton.style.display = "none";

        popupContent.addEventListener("mouseover", function () {
            closeButton.style.display = "block";
        });

        popupContent.addEventListener("mouseout", function () {
            setTimeout(function () {
                closeButton.style.display = "none";
            }, 3000);
        });
    });

    // تنسيق CSS
    jQuery("head").append(`
        <style>
        .popup-overlay {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0, 0, 0, 0.85); display: none;
            justify-content: center; align-items: center; z-index: 1000;
        }
        .popup-content {
            position: relative; background: #1e1e1e; padding: 20px;
            border-radius: 10px; text-align: center;
        }
        .close-popup {
            position: absolute; top: 10px; right: 15px;
            font-size: 28px; color: #fff; cursor: pointer;
        }
        .video-thumbnail {
            position: relative; cursor: pointer;
            border-radius: 15px; transition: transform 0.3s ease;
        }
        .video-thumbnail:hover {
            transform: scale(1.05);
        }
        .play-button {
            position: absolute; top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            width: 80px; height: 80px;
            background: url('https://i.servimg.com/u/f36/18/22/98/96/image210.png') no-repeat center;
        }
        .video-popup-content {
            width: 80%; max-width: 730px; height: 410px;
            border-radius: 15px; background: rgba(30, 30, 30, 0.9);
            position: relative; box-shadow: 0 0 25px rgba(0, 0, 0, 0.8);
        }
        #videoFrame {
            border-radius: 15px; width: 100%; height: 100%; border: none;
        }
        @media (max-width: 480px) {
            .video-thumbnail {
                max-width: 100%;
            }
        }
        </style>
    `);
});

/* ==========================================================
   ❖ نهاية كود التصميم بواسطة جاك سبارو ⚓
   ❖ https://zx303.blogspot.com/ | مدونة القرصان
   ========================================================== */

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

آخر الأخبار

كود لتحويل روابط الفيديو في المنتدى الى صور مصغرة قابلة للنقر وعند النقر عليها تفتح الفيديو في نافذة منبثقة







عن القرصان جاك سبارو

التعليقات

آخر الأخبار

كود لتحويل روابط الفيديو في المنتدى الى صور مصغرة قابلة للنقر وعند النقر عليها تفتح الفيديو في نافذة منبثقة







عن القرصان جاك سبارو

شاهد أيضاً

التعليقات