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);