عرض الفيديوهات بشكل سلايدر داخل موضوعات بلوجر

<style>

.video-slider {

  width: 100%;

  max-width: 900px; 

  margin: 40px auto;

  position: relative;

  border-radius: 8px;

  overflow: hidden;

}

.video-container {

  position: absolute;

  width: 100%;

  height: 100%;

  opacity: 0;

  transition: opacity 0.7s ease;

  pointer-events: none;

}

.video-container.active {

  position: relative;

  padding-bottom: 56.25%;

  height: 0;

  opacity: 1;

  pointer-events: auto;

}

.video-container iframe {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

}

.slider-button {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  z-index: 10;

  background-color: rgba(0,0,0,0.5);

  border: none;

  color: #fff;

  padding: 6px 12px;

  font-size: 18px;

  cursor: pointer;

  border-radius: 4px;

  user-select: none;

}

#prevBtn { left: 10px; }

#nextBtn { right: 10px; }

@media (max-width:480px){

  .slider-button { font-size: 16px; padding: 4px 8px; }

}

.floating-video {

  position: fixed;

  width: 320px;

  height: 180px;

  bottom: 20px;

  right: 20px;

  z-index: 9999;

  box-shadow: 0 4px 12px rgba(0,0,0,0.3);

  border-radius: 4px;

}

</style>

<script type='text/javascript'>

//<![CDATA[

document.addEventListener("DOMContentLoaded", function() {

  const containers = document.querySelectorAll('.video-container');

  const prevBtn = document.getElementById('prevBtn');

  const nextBtn = document.getElementById('nextBtn');

  let currentIndex = 0;

  let floatingVideo = null;

  function showVideo(index) {

    containers.forEach((c, i) => c.classList.toggle('active', i === index));

    currentIndex = index;

    updateFloating();

  }

  prevBtn.addEventListener('click', () => {

    const newIndex = (currentIndex - 1 + containers.length) % containers.length;

    showVideo(newIndex);

  });

  nextBtn.addEventListener('click', () => {

    const newIndex = (currentIndex + 1) % containers.length;

    showVideo(newIndex);

  });

  // --- Floating Video Functions ---

  function createFloating() {

    if (!floatingVideo) {

      const activeIframe = containers[currentIndex].querySelector('iframe');

      floatingVideo = activeIframe.cloneNode(true);

      floatingVideo.classList.add('floating-video');

      document.body.appendChild(floatingVideo);

    }

  }

  function updateFloating() {

    if (floatingVideo) {

      const activeIframe = containers[currentIndex].querySelector('iframe');

      floatingVideo.src = activeIframe.src;

    }

  }

  function removeFloating() {

    if (floatingVideo) {

      floatingVideo.remove();

      floatingVideo = null;

    }

  }

  // --- Scroll Listener ---

  window.addEventListener('scroll', () => {

    const rect = containers[currentIndex].getBoundingClientRect();

    if (rect.bottom < 0 || rect.top > window.innerHeight) {

      createFloating();

    } else {

      removeFloating();

    }

  });

});

//]]>

</script>

<div class="video-slider">

  <div class="video-container active">

    <iframe src="https://www.youtube.com/embed/y9ctE5Urxfc" frameborder="0" allowfullscreen></iframe>

  </div>

  <div class="video-container">

    <iframe src="https://www.youtube.com/embed/CdfqW83JaeM" frameborder="0" allowfullscreen></iframe>

  </div>

  <div class="video-container">

    <iframe src="https://www.youtube.com/embed/pLq8bQjhC18" frameborder="0" allowfullscreen></iframe>

  </div>

  <div class="video-container">

    <iframe src="https://www.youtube.com/embed/k1QcCsPJAOc" frameborder="0" allowfullscreen></iframe>

  </div>

  <button class="slider-button" id="prevBtn">&#8592;</button>

  <button class="slider-button" id="nextBtn">&#8594;</button>

</div>

ملاحظة

تنبيه

  <div class="video-container">

    <iframe src="https://www.youtube.com/embed/k1QcCsPJAOc" frameborder="0" allowfullscreen></iframe>

  </div>