How to Add a YouTube Video Slider in Blogger & Wordpress
Want to feature multiple YouTube videos in a single, elegant space? A responsive YouTube video slider is the perfect solution for modern blogs.
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!
How to Add the Video Slider (Step-by-Step)
Depending on which platform you use, follow the simple instructions below to get your slider live in minutes.
For Blogger (Blogspot) Users:
- Log in to your Blogger Dashboard.
- Go to Layout and click on Add a Gadget.
- Select HTML/JavaScript from the list.
- Paste the code provided above into the Content box.
- Click Save and move the gadget to your desired location (e.g., above your posts or in the sidebar).
You can also directly use the below code in post or page HTML Section.
For WordPress Users:
- Open the page or post where you want the slider.
- Click the (+) Add Block icon.
- Search for and select the Custom HTML block.
- Paste the code into the block.
- Click Preview or Update to see it live.
Code for Video slider
<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>The best part about this script is that it is fully customizable. You don’t need to be a developer to make these changes:
Changing the Videos
To add your own videos, look for this part of the code: src=”https://www.youtube.com/embed/VIDEO_ID?enablejsapi=1″ Replace VIDEO_ID with the unique code found at the end of any YouTube URL.
Adjusting the Slider Speed:
If you want the sliding animation to be faster or slower, find this line in the Style section: transition: transform 0.5s ease-in-out; Change 0.5s to 0.3s for a snappier feel, or 1.0s for a smoother, slower transition.
Adding More Slides
To add a fifth or sixth video, simply copy a <div class="video-slide">...</div> block and paste it right below the previous one. The JavaScript is dynamic and will automatically calculate the navigation for the new slides.
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.
Final Thoughts
Adding a YouTube Video Slider is a fantastic way to keep your audience on your site longer without sacrificing page speed with heavy plugins. This clean HTML/CSS solution ensures your site remains professional and mobile-responsive.
Stuck on a step? If you have trouble getting the slider to align or want to add a specific feature like “Auto-play,” drop a comment below! I’d love to help you tweak the code for your specific theme.
Don’t forget to Subscribe to our YouTube channel for more web development tips and Blogger tricks!
