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