웹퍼블) swiper slide 안에 iframe태그 사용 시 터치 슬라이드 안됨

디자이너분이 슬라이드 안에 유튜브 영상을 넣어놨고 그걸 슬라이드가 가능하게 만들어달라고 요청했다.

 

구현할려니 다른 건 다 되는데 화면을 옆으로 움직였을 때 슬라이드가 안먹힌다....

 

왜 그러나 했더니 iframe 태그에서 터치 슬라이드 이벤트를 막기 때문이라고 한다.

 

해결방법은 당연히 있다.

 

.swiper-slide iframe {
    pointer-events: none;
}

css 안에 iframe 태그 안에 해당 속성을 추가하면 된다. 

 

다만 저걸 추가하면 터치 슬라이드는 되지만 영상 재생이 안된다....

 

둘 중 하나를 택해야 했다. 

 

결론은 터치 슬라이드가 안되지만 영상 재생은 되게 하는 걸로 했다.