Swiper를 이용하여 슬라이더에 유튜브 영상 넣기

다른 슬라이더들은 화면 이동시 기존 영상재생지점이 초기화 되거나 하는 문제가 있는데

Swiper 는 그런일이 없이 매끄럽게 진행된다

 

JSFiddle 로 만든 예제

https://jsfiddle.net/kaqxgod3/

Edit fiddle - JSFiddle - Code Playground

 

공식사이트

https://swiperjs.com/

Swiper - The Most Modern Mobile Touch Slider

 

github 소스 예제

https://gist.github.com/alasomlira/499ada1b19094ed9600fc637cfce700a

SwiperJS & YouTube

 

예제 중  index.html 의 data-id 는 유튜브 주소의  뒤 아이디를 의미한다

예 : https://www.youtube.com/watch?v=MxBRpWcXeOA  라는 주소가 있다면 

<div class="swiper-slide">
  <div class="video-container">
	<div class="yt-player" data-id="MxBRpWcXeOA"></div>
  </div>
</div>

data-id에 MxBRpWcXeOA 를 넣어주면 된다