유튜브 Shorts 자동 플레이는 여러 개의 영상을 슬라이드가 활성화 될때마다 해당 영상을 자동 플레이하고, 비활성화 되면 영상이 멈추게 하는 방법에 대해서 알아보겠습니다. 유튜브 Shorts 영상 몇 개, 슬라이드 라이브러리는 Swiper을 사용해서 알려드리겠습니다.
유튜브 Shorts 자동플레이 예제
웹페이지 로딩 후 첫 번째 영상은 자동 플레이가 안 됩니다. 이후 좌우 화살표로 이동하면 해당 슬라이드가 활성화 후 영상이 자동 플레이됩니다.
HTML, CSS, JavaScript 소스를 하나씩 알아보겠습니다.
예제코드 HTML
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script src="https://www.youtube.com/iframe_api"></script>
<div class="main-shorts-video-wrap">
<div class="title-wrap">
<img src="https://exploretechlife.com/wp-content/uploads/2025/07/icon_youtube_shorts_256.png" />
</div>
<div class="swiper mainShortsVideoSwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="shorts-container">
<iframe class="shorts-video"
src="https://www.youtube.com/embed/SAG7TPjTlZ8?enablejsapi=1&rel=0&playsinline=1"
frameborder="0"
allowfullscreen
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share">
</iframe>
</div>
</div>
<div class="swiper-slide">
<div class="shorts-container">
<iframe class="shorts-video"
src="https://www.youtube.com/embed/WeUYp7qkXKQ?enablejsapi=1&rel=0&playsinline=1"
frameborder="0"
allowfullscreen
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share">
</iframe>
</div>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
</div>html 코드 중 포인트는 iframe에서 영상 URL입니다. ‘https://www.youtube.com/embed/WeUYp7qkXKQ’ 이 URL이 기본 영상 URL인데, 파라미터 값을 추가를 해줘야지 JavaScript에서 컨트롤이 가능합니다. 추가 할 파라미터는 ‘?enablejsapi=1&rel=0&playsinline=1’ 입니다.
예제코드 CSS
.main-shorts-video-wrap {color: #fff;background-color: #222;padding-bottom: 50px;border:0;border-radius:10px;}
.main-shorts-video-wrap .title-wrap {display: flex;justify-content: center;flex-direction: row;align-items: center;padding: 100px 0;}
.main-shorts-video-wrap .title-wrap img {height: 30px;margin-right: 10px;}
.main-shorts-video-wrap .swiper-wrapper {padding-bottom: 50px}
.main-shorts-video-wrap .swiper {
width: 100%;
height: 100%;
}
.main-shorts-video-wrap .swiper-slide {
text-align: center;
font-size: 18px;
background: #444;
display: flex;
justify-content: center;
align-items: center;
border-radius: 15px;
min-width: 200px;
}
.main-shorts-video-wrap .swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.main-shorts-video-wrap .shorts-container {
position: relative;width: 100%;aspect-ratio: 9 / 16;margin: 0 auto;
}
.main-shorts-video-wrap .shorts-container iframe {
position: absolute;top: 0;left: 0;width: 100%;height: 100%; border-radius: 15px;
}유튜브 Shorts 영상은 비율이 9:16으로 CSS에서 포인트는 해당 비율을 설정해주는 역할을 합니다. 이전에 포스팅한 ‘CSS로 고정 비율 박스 만들기‘를 확인하시면 쉽게 이해하실 수 있습니다.
예제코드 JavaScript
let players = [];
// 유튜브 API 로드 후 실행
function onYouTubeIframeAPIReady() {
document.querySelectorAll('.shorts-video').forEach((el, index) => {
players[index] = new YT.Player(el, {
events: {
'onReady': (event) => {
if (index === swiper.realIndex) {
event.target.playVideo(); // 초기 로딩 시 첫 슬라이드 재생
}
}
}
});
});
}
var swiper = new Swiper(".mainShortsVideoSwiper", {
slidesPerView: 2,
spaceBetween: 30,
centeredSlides: true,
autoWidth: true,
autoHeight: true,
loop: false,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
on: {
slideChangeTransitionEnd: function () {
players.forEach((player, idx) => {
if (idx === this.realIndex) {
player.playVideo();
} else {
player.pauseVideo();
}
});
}
},
breakpoints: {
1000: {
slidesPerView: 5,
}
}
});유튜브 Shorts 자동플레이를 위한 슬라이드(Swiper)과 영상 컨트로 JavaScript 입니다. 해당 소스에서 포인트는 swiper 설정에서 breakpoints 옵션입니다. 예제코드의 1000은 가로 픽셀 사이즈 이며, 1000px 이상일때 아래 옵션을 적용합니다. 현재 소스는 반응형으로 모바일(390px)와 PC(1000px) 사이즈로 설정이 되었습니다. 1000px 이상이면 slidesPerView 5, 1000px 보다 적으면 2로 설정했습니다.
“이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.”