How to Add a YouTube Video Slider in Blogger

Are you looking for a quick and beautiful way to display your YouTube videos on your Blogger website? In this tutorial, I’ll show you how to add a responsive YouTube video slider in Blogger in just 2 minutes! This is perfect for showcasing your latest uploads or a video playlist in a clean and scrollable format.

Step-by-Step Tutorial

✅ Step 1: Copy the HTML Structure

<div class="slider-container">
  <button class="slider-btn prev-btn">&#10094;</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">&#10095;</button>
</div>

🔁 Replace the existing video IDs with your YouTube video IDs. (Highlighted Above)

✅ Step 2: Add the CSS Styling

Paste the following CSS into your Theme > Customize > Advanced > Add CSS section or directly in your theme code inside <style> tag.

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

✅ Step 3: Add JavaScript for Playback

Now, paste this JavaScript just before the closing </body> tag of your theme or use it directly inside a Post/page.

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

Adding a YouTube video slider to your Blogger site is a great way to boost engagement and reduce bounce rate. This method is clean, fast, and doesn’t require heavy libraries or plugins.

Source:
This YouTube video slider is based on the original code shared by Techyleaf. – https://www.techyleaf.in/youtube-video-slider/