KODE VIDIO
<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 allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/1n_QpofW_h4" title="YouTube video player"></iframe>
</div>
</div>
<div class="video-slide">
<div class="video-wrapper">
<iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/Uv_7MATmvGU" title="YouTube video player"></iframe>
</div>
</div>
<div class="video-slide">
<div class="video-wrapper">
<iframe src="https://www.youtube.com/embed/lb_VI7yzvZk" 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 allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/pMnidPpy0Kk" title="YouTube video player"></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>
Tags :
Kode Blogs
0 Komentar untuk "KODE VIDIO"