How to Add a YouTube Video Slider in Blogger & Wordpress
Want to create a modern, mobile-friendly YouTube video slider for your Blogger or WordPress site? Whether you’re showcasing your YouTube playlist, embedding product demos, or displaying video testimonials, a video slider makes your content more engaging and professional.
In this tutorial, I’ll show you how to add a responsive YouTube video slider using HTML, CSS, and JavaScript — perfect for both Blogger and WordPress websites. No third-party plugins needed!
📌 Features of This Video Slider:
- Fully responsive (works on mobile and desktop)
- Sleek navigation buttons
- Stops current video when sliding to the next
- Clean design with rounded corners & shadows
- No jQuery required!
Code for Video slider
Paste the following HTML code into your Blogger HTML section or in WordPress using a Custom HTML block:
<style>
.slider-container {
position: relative;
max-width: 1000px;
margin: 40px auto;
overflow: hidden;
}
.video-slider {
display: flex;
transition: transform 0.5s ease-in-out;
}
.video-slide {
min-width: 100%;
padding: 0 10px;
box-sizing: border-box;
}
.video-wrapper {
position: relative;
width: 100%;
padding-bottom: 56.25%;
height: 0;
}
.video-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
border-radius: 12px;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.slider-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: #000000aa;
color: #fff;
border: none;
padding: 10px 16px;
cursor: pointer;
border-radius: 50%;
z-index: 10;
font-size: 18px;
}
.slider-btn:hover {
background: red;
color: white;
}
.prev-btn {left: 10px;}
.next-btn { right: 10px;}
@media (max-width: 768px) {
.slider-btn {
padding: 8px 12px;
font-size: 16px;
}
}
</style>
<div class="slider-container">
<button class="slider-btn prev-btn">❮</button>
<div class="video-slider" id="videoSlider">
<div class="video-slide">
<div class="video-wrapper">
<iframe src="https://www.youtube.com/embed/RE4yhPOCvLk?enablejsapi=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
</div>
<div class="video-slide">
<div class="video-wrapper">
<iframe src="https://www.youtube.com/embed/bmZ_hJAzO0c?enablejsapi=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
</div>
<div class="video-slide">
<div class="video-wrapper">
<iframe src="https://www.youtube.com/embed/ahh-2YUO_jk?enablejsapi=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
</div>
<div class="video-slide">
<div class="video-wrapper">
<iframe src="https://www.youtube.com/embed/Qth_7AXcgUk?enablejsapi=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
</div>
</div>
<button class="slider-btn next-btn">❯</button>
</div>
<script>
const slider = document.getElementById('videoSlider');
const slides = document.querySelectorAll('.video-slide');
let index = 0;
document.querySelector('.next-btn').addEventListener('click', () => {
stopVideo(index);
index = (index + 1) % slides.length;
updateSlider();
});
document.querySelector('.prev-btn').addEventListener('click', () => {
stopVideo(index);
index = (index - 1 + slides.length) % slides.length;
updateSlider();
});
function updateSlider() {
slider.style.transform = `translateX(-${index * 100}%)`;
}
function stopVideo(i) {
const iframe = slides[i].querySelector('iframe');
iframe.contentWindow.postMessage(JSON.stringify({
event: 'command',
func: 'stopVideo',
args: []
}), '*');
}
</script>This video slider is a great way to make your Blogger or WordPress site more interactive and visually appealing. You don’t need any plugin or third-party script — just copy, paste, and customize.
You can embed as many youtube video you want in this slider. Compatible in both Blogger and wordpress website.
If you face any issue or need any more modification, do let me know in the comment section. If you found this helpful, Make sure to Like the video and Subscribe us on YouTube.
