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>‹</span>",
"<span>›</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]'); ?>
