Php Tutorials: 2026

06 May 2026

How to create video slider with cuncks of videos without download all videos?

Create video slider with cuncks of videos without download all videos

function custom_video_slider_shortcode() {

    $slider_id = 'video-slider-' . wp_unique_id();

    ob_start();
    ?>

    <style>
    .video-slider-wrapper {
        position: relative;
        padding: 0 50px;
        overflow: hidden;
    }

    .custom-video-slider.owl-carousel {
        display: block;
    }

    .custom-video-slider .item {
        height: auto;
    }

    .custom-video-slider .story-video {
        position: relative;
        cursor: pointer;
        overflow: hidden;
        border-radius: 12px;
    }

    .custom-video-slider img,
    .custom-video-slider video {
        width: 100%;
        height: 517px !important;
        object-fit: cover;
        display: block;
        border-radius: 12px;
    }

    /* Play Button */
    .play-btn {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 65px;
        height: 65px;
        background: rgb(255 255 255 / 60%);
        border-radius: 50%;
        z-index: 5;
    }

    .play-btn:before {
        content: '';
        position: absolute;
        left: 25px;
        top: 20px;
        border-left: 20px solid #082267;
        border-top: 12px solid transparent;
        border-bottom: 12px solid transparent;
    }

    /* Owl Arrows */
    .video-slider-wrapper .owl-nav {
        margin: 0;
    }

    .video-slider-wrapper .owl-nav button.owl-prev,
    .video-slider-wrapper .owl-nav button.owl-next {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 45px !important;
        height: 45px !important;
        background: #f4f4f4 !important;
        border-radius: 50% !important;
        z-index: 20;
        display: flex !important;
        align-items: center;
        justify-content: center;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        outline: none !important;
    }

    .video-slider-wrapper .owl-nav button.owl-prev {
        left: 0;
    }

    .video-slider-wrapper .owl-nav button.owl-next {
        right: 0;
    }

    .video-slider-wrapper .owl-nav button span {
        font-size: 32px;
        line-height: 1;
        font-weight: 700;
        color: #082363;
        position: relative;
        top: -2px;
    }

    .video-slider-wrapper .owl-nav button.disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }

    .video-slider-wrapper .owl-dots {
        display: none;
    }

    @media(max-width:768px){
        .video-slider-wrapper {
            padding: 0 30px;
        }

        .custom-video-slider img,
        .custom-video-slider video {
            /*height: 220px !important;*/
        }
    }
    </style>

    <div class="video-slider-wrapper" id="<?php echo esc_attr($slider_id); ?>">

        <div class="custom-video-slider owl-carousel owl-theme">

            <?php
            $video_base = trailingslashit(get_stylesheet_directory_uri()) . 'assets/videos/review-videos';
            
            $videos = [
                [
                    'm3u8'  => $video_base . '/video1/uAF7Vj.m3u8',
                    'thumb' => '/wp-content/uploads/2026/05/Moving-Artwork.webp'
                ],
                [
                    'm3u8'  => $video_base . '/video2/qIFnyy.m3u8',
                    'thumb' => '/wp-content/uploads/2026/05/Review-2.webp'
                ],
                [
                    'm3u8'  => $video_base . '/video3/RNF7vy.m3u8',
                    'thumb' => '/wp-content/uploads/2026/05/bed.webp'
                ],
                [
                    'm3u8'  => $video_base . '/video4/ja6BNj.m3u8',
                    'thumb' => '/wp-content/uploads/2026/05/piano.webp'
                ],
                [
                    'm3u8'  => $video_base . '/video5/faymEv.m3u8',
                    'thumb' => '/wp-content/uploads/2026/05/Review.webp'
                ]
            ];

            foreach ($videos as $video) :
            ?>

                <div class="item">
                    <div class="story-video"
                         data-src="<?php echo esc_url($video['m3u8']); ?>"
                         data-thumb="<?php echo esc_url($video['thumb']); ?>">

                        <img src="<?php echo esc_url($video['thumb']); ?>" alt="Video Thumbnail">
                        <div class="play-btn"></div>

                    </div>
                </div>

            <?php endforeach; ?>

        </div>

    </div>

    <!-- HLS Script -->
    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>

    <script>
    jQuery(document).ready(function($) {

        const wrapper = $("#<?php echo esc_js($slider_id); ?>");
        const slider = wrapper.find(".custom-video-slider");

        function stopVideo(el) {
            const video = el.querySelector("video");

            if (video) {
                if (video.hls) {
                    video.hls.destroy();
                }

                video.pause();
                video.removeAttribute("src");
                video.load();
            }

            const thumb = el.getAttribute("data-thumb");

            el.innerHTML = `
                <img src="${thumb}" alt="Video Thumbnail">
                <div class="play-btn"></div>
            `;

            el.classList.remove("loaded");
        }

        slider.owlCarousel({
            items: 3,
            margin: 25,
            loop: true,
            nav: true,
            dots: false,
            autoplay: false,
            smartSpeed: 500,
            navText: [
                "<span>&lsaquo;</span>",
                "<span>&rsaquo;</span>"
            ],
            responsive: {
                0: {
                    items: 1,
                    margin: 15
                },
                576: {
                    items: 1,
                    margin: 15
                },
                768: {
                    items: 2,
                    margin: 20
                },
                992: {
                    items: 2,
                    margin: 20
                },
                1200: {
                    items: 3,
                    margin: 25
                },
                1400: {
                    items: 3,
                    margin: 30
                }
            }
        });

        wrapper.on("click", ".story-video", function() {

            const el = this;

            if (el.classList.contains("loaded")) {
                stopVideo(el);
                return;
            }

            wrapper.find(".story-video.loaded").each(function() {
                stopVideo(this);
            });

            const video = document.createElement("video");

            video.autoplay = true;
            video.controls = true;
            video.playsInline = true;
            video.preload = "none";

            const src = el.getAttribute("data-src");

            if (typeof Hls !== "undefined" && Hls.isSupported()) {
                const hls = new Hls();
                hls.loadSource(src);
                hls.attachMedia(video);
                video.hls = hls;
            } else if (video.canPlayType("application/vnd.apple.mpegurl")) {
                video.src = src;
            }

            el.innerHTML = "";
            el.appendChild(video);
            el.classList.add("loaded");
        });

        slider.on("changed.owl.carousel translated.owl.carousel dragged.owl.carousel", function() {
            wrapper.find(".story-video.loaded").each(function() {
                stopVideo(this);
            });
        });

    });
    </script>

    <?php
    return ob_get_clean();
}

add_shortcode('custom_video_slider', 'custom_video_slider_shortcode');

<?php echo do_shortcode('[custom_video_slider]'); ?>

01 May 2026

How to download/create content in doc from website by adding code in chrome console?

Download/Create content in doc from website by adding code in chrome console

function exportHTMLtoDoc(elementId, fileName = 'document') {

// 1. Get the specific div content

const header = "<html xmlns:o='urn:schemas-microsoft-com:office:office' "+

"xmlns:w='urn:schemas-microsoft-com:office:word' "+

"xmlns='http://www.w3.org/TR/REC-html40'>"+

"<head><meta charset='utf-8'></head><body>";

const footer = "</body></html>";

const sourceHTML = header + document.getElementById(elementId).innerHTML + footer;

// 2. Create a Blob with MS Word MIME type

const source = 'data:application/vnd.ms-word;charset=utf-8,' + encodeURIComponent(sourceHTML);

// 3. Create a temporary download link

const fileDownload = document.createElement("a");

document.body.appendChild(fileDownload);

fileDownload.href = source;

fileDownload.download = fileName + '.doc';

fileDownload.click();

document.body.removeChild(fileDownload);

}

(function(){

const el = document.querySelector('[data-testid="view-lesson-content"]');

if(!el){console.log("Element not found"); return;}

el.id='temp-export';

exportHTMLtoDoc('temp-export','My_Web_Export');

})();

18 March 2026

How to create youtube videos slider with play and pause option in wordpress?

Create youtube videos slider with play and pause option in wordpress

youtube videos slider

Use this shortcode:-[punjab_today]

function my_youtube_owl_slider($content) {
    if (strpos($content, '[youtube_slider]') === false) return $content;

    $channel_id = 'UCFSdmqI8stLd4NuOkKTDlMw';
    $rss_url = "https://www.youtube.com/feeds/videos.xml?channel_id=" . $channel_id;

    $feed = @simplexml_load_file($rss_url);
    if (!$feed) return str_replace('[youtube_slider]', '', $content);

    ob_start();
    ?>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
    
    <style>
        .yt-slider-wrapper { margin: 20px 0; min-height: 250px; }
        .yt-owl .item { background: #000; border-radius: 12px; overflow: hidden; height: 230px; position: relative; }
        .yt-player-el { width: 100%; height: 100%; display: block; }
        .yt-nav { text-align: center; margin-top: 15px; }
        .yt-nav button { background: #000000; color: #fff; border: none; padding: 8px 18px; cursor: pointer; border-radius: 0px; font-weight: 600; margin: 0 5px; }
        .yt-nav button:hover {
            background: #edb500;
        }
        .latestNewsVideosTitle {
            color: #000000;
            font-size: 22px !important;
            line-height: 1.2 !important;
            font-weight: 900 !important;
            border-bottom: 2px solid #000;
            padding-bottom: 9px;
            display: inline-block;
            margin: 0px;
            margin-bottom: 25px;
        }
    </style>
    
    <div class="yt-slider-wrapper">
        <h3 class="latestNewsVideosTitle">Latest News Videos</h3>
        <div class="yt-owl owl-carousel">
            <?php 
            $count = 0;
            $unique_prefix = 'yt_' . time(); // Ensures unique IDs even if page is reloaded via AJAX
            foreach ($feed->entry as $entry): 
                if ($count >= 10) break;
                $video_id = (string) $entry->children('yt', true)->videoId;
                $p_id = $unique_prefix . '_' . $count;
            ?>
                <div class="item">
                    <div id="<?php echo $p_id; ?>" class="yt-player-el" data-video-id="<?php echo esc_attr($video_id); ?>"></div>
                </div>
            <?php 
                $count++;
            endforeach; 
            ?>
        </div>
        <div class="yt-nav">
            <button class="yt-prev">←</button>
            <button class="yt-next">→</button>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
    <script src="https://www.youtube.com/iframe_api"></script>

    <script>
    (function($){
        var players = [];

        function initPlayers() {
            $('.yt-player-el').each(function() {
                var $el = $(this);
                if ($el.hasClass('yt-ready')) return; // Don't re-init if already done

                var player = new YT.Player(this.id, {
                    height: '260',
                    width: '100%',
                    videoId: $el.data('video-id'),
                    playerVars: { 'rel': 0, 'enablejsapi': 1 },
                    events: {
                        'onStateChange': function(event) {
                            if (event.data === YT.PlayerState.PLAYING) {
                                players.forEach(function(p) {
                                    if (p !== event.target && typeof p.pauseVideo === 'function') p.pauseVideo();
                                });
                            }
                        }
                    }
                });
                players.push(player);
                $el.addClass('yt-ready');
            });
            
            initCarousel();
        }

        function initCarousel() {
            var $slider = $('.yt-owl');
            if ($slider.hasClass('owl-loaded')) return;

            $slider.owlCarousel({
                loop: false,
                margin: 15,
                nav: false,
                dots: false,
                responsive: { 0:{items:1}, 600:{items:2}, 1000:{items:3} }
            });

            $('.yt-next').off().on('click', function() { $slider.trigger('next.owl.carousel'); });
            $('.yt-prev').off().on('click', function() { $slider.trigger('prev.owl.carousel'); });
        }

        // Handle the YouTube API state
        window.onYouTubeIframeAPIReady = function() {
            initPlayers();
        };

        // If API is ALREADY loaded (second time showing), fire immediately
        $(document).ready(function() {
            if (typeof YT !== 'undefined' && YT.loaded) {
                initPlayers();
            }
        });

    })(jQuery);
    </script>

    <?php
    $html = ob_get_clean();
    return str_replace('[youtube_slider]', $html, $content);
}
add_filter('the_content', 'my_youtube_owl_slider', 99);