تغییر ویدیو پلیر وردپرس

• وردپرس

این اسکریپت برای جایگزین کردن پلیر ویدیوی پیش‌فرض وردپرس با یک پلیر ویدیوی محبوب به نام Video.js استفاده می‌شود. کاربرد اصلی آن بهبود ظاهر پلیر ویدیویی و افزودن قابلیت‌های جدید به آن است.

برای استفاده از این کد، شما باید مراحل زیر را دنبال کنید:

1. ابتدا باید کد را در قالب (تم) وردپرس خود اضافه کنید. برای این کار، می‌توانید از فایل functions.php در پوشه‌ی تم خود استفاده کنید. اگر این فایل وجود ندارد، می‌توانید ایجاد کنید و کد را در آن قرار دهید.
2. پس از اینکه کد به فایل functions.php اضافه شد، وقتی ویدیویی در سایت وردپرسی خود قرار می‌دهید، به طور خودکار پلیر پیش‌فرض جایگزین شده و پلیر Video.js نمایش داده می‌شود.
3. همچنین ویدیو‌ها به صورت خودکار در وسط قرار می‌گیرند، که این ظاهری زیباتر برای پلیر ایجاد می‌کند.
4. در صورتی که نیاز به تنظیمات اضافی برای پلیر Video.js داشتید، می‌توانید به توضیحات و مستندات رسمی این کتابخانه مراجعه کنید.

به این ترتیب، با استفاده از این کد، شما می‌توانید پلیر ویدیویی زیباتر و با قابلیت‌های بیشتری را برای بازدیدکنندگان سایت خود فراهم کنید.

نکته: در سورس پایین قسمتی وجود دارد که شما باید پلاگین را در هاست خود اپلود کرده و مقداردهی کنید. https://url.com/video.min.js و https://url.com/video-js.min.css که لینک هر دو در پایین موجود است.

فایل ها را دانلود کنید و مقداردهی کنید.

دانلود min.js  –  دانلود min.css

function wp_replace_default_video_player() {
    // ثبت و انتظار برای Video.js و CSS آن
    wp_register_script('video-js', 'https://url.com/video.min.js', array(), '7.11.4', true);
    wp_register_style('video-js-css', 'https://url.com/video-js.min.css', array(), '7.11.4');

    // افزودن Video.js و CSS آن به صفحه
    wp_enqueue_script('video-js');
    wp_enqueue_style('video-js-css');

    // افزودن سبک‌های CSS برای قرار دادن ویدیو در وسط المان‌ها و صفحه
    echo <<<EOT
<style>
    .video-centered-container {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
    }
    
    .video-centered-container video {
        display: block;
        max-width: 100%;
        max-height: 100%;
    }
</style>
EOT;
    
    // ایجاد یک اسکریپت جاوااسکریپت برای جایگزین کردن پلیر ویدیوی پیش‌فرض
    echo <<<EOT
<script>
    document.addEventListener("DOMContentLoaded", function(event) {
        var videoElements = document.querySelectorAll("video.wp-video-shortcode");
        for (var i = 0; i < videoElements.length; i++) {
            var videoElement = videoElements[i];
            
            // ایجاد یک کانتینر برای قرار دادن ویدیو در وسط
            var containerElement = document.createElement("div");
            containerElement.classList.add("video-centered-container");
            videoElement.parentNode.insertBefore(containerElement, videoElement);
            containerElement.appendChild(videoElement);

            // جایگزینی کلاس پیش‌فرض ویدیو با کلاس Video.js
            videoElement.classList.remove("wp-video-shortcode");
            videoElement.classList.add("video-js", "vjs-default-skin", "vjs-big-play-centered");

            // فعال‌سازی Video.js برای المان جدید
            videojs(videoElement);
        }
    });
</script>
EOT;
}

add_action('wp_footer', 'wp_replace_default_video_player');