swiper.js 를 활용해서 유튜브 위젯 스킨을 하나 만들어볼까 합니다. -_-)/

라이믹스/XE호환 유튜브 위젯 기본 스킨은 이 자료를 활용합니다.

저는 contentextended 위젯에서 스와이퍼 슬라이더를 활용해서 한번 만들어보겠습니다!

유튜브 게시판 스킨 

1. insp_유튜브 게시판 스킨 ver. 1.0 / 이나저나

https://xe1.xpressengine.com/index.php?mid=download&package_id=22753933

2. sketchbook5 유투브 갤러리 게시판 스킨 ver. 0.3 / 현스가이

https://xe1.xpressengine.com/index.php?mid=download&package_id=22301990

3. XNS 유튜브 게시판 / 친절뺀질이

https://xenara.zaggu.net/open_product/29437?_filter=search&search_target=title_content&search_keyword=%EC%9C%A0%ED%8A%9C%EB%B8%8C&category=29321

4. 유튜브 게시판 스킨 - 기본 / 친절뺀질이

상품명 : XNS 유튜브 게시판 스킨 - 기본

설치경로 : board_youtube_default

제작자 : 친절뺀질이

다운로드 : https://xenara.zaggu.net/open_product/29377?_filter=search&search_target=title_content&search_keyword=%EC%9C%A0%ED%8A%9C%EB%B8%8C&category=29321

사용방법 : 

1) 사용자정의의 id 를 youtube_url 로 입력 후 저장합니다.

2) 스킨설정에서 사용자정의값을 youtube_url 로 입력 후 저장합니다.

3) 글쓰기는 일반 글쓰기와 동일합니다. 사용자정의값에 유튜브 공유 주소를 입력 후 저장하면 됩니다.

유튜브 위젯 스킨

1. WIDGET KGMEDIA ver. 1.1 / 친절뺀질이

https://xe1.xpressengine.com/index.php?mid=download&package_id=20605745

*PHP7.4에서 동작되지 않습니다.

사용방법

1) 발생되는 오류1

먼저 widgets/widget_kgmedia/widget_kgmedia.class.php 파일에서 526라인에서 Object를 BaseObject로 수정해주세요.

2) 발생되는 오류2

작업을 위해서.. 스킨에 {$widget_info} 코드를 입력했더니 아래와 같은 오류가 발생하더군요.

Error #0 "Object of class stdClass could not be converted to string" in D:\xampp\htdocs\rx\files\cache\template\widgets\widget_kgmedia\skins\widget_kgmedia_skin_movie_v1_0_1_0_1_multiplayer\kgmedia.html.php on line 17

위 오류에 관해서는 아래 글을 읽어보시면 좋을 듯 합니다.

https://xetown.com/questions/1473830

https://xetown.com/questions/1551943

[상품리뷰]

친절뺀질이님은 전업은 별도로 있으시면서 취미삼아 개발을 시작하신 듯 해당 상품은 개발하기 처음에 만들었던 초기 상품이라,

이제는 거의 레거시 코드라서 php.7.4 이상의 라이믹스에서 제대로 동작하지 않습니다.

2. XNS Owl Carousel Gallery 위젯 / 친절뺀질이

https://xenara.zaggu.net/open_product/30103

2.1. XNS Owl Carousel Gallery 위젯 유튜브 스킨 / 친절뺀질이

https://xenara.zaggu.net/open_product/30106

*게시물 갯수가 적어서 그런지 틀이 깨지네요.

3. XNS YouTube Preview List

https://xenara.zaggu.net/open_product/30546?_filter=search&category=29321&search_target=title_content&search_keyword=%EC%9C%A0%ED%8A%9C%EB%B8%8C

* PHP7.4에서 재생이 잘 안되는거 같네요..

4. XNS FOTORAMA GALLERY

https://xenara.zaggu.net/open_product/29420?_filter=search&category=29321&search_target=title_content&search_keyword=%EC%9C%A0%ED%8A%9C%EB%B8%8C

스와이퍼 라이브러리

https://swiperjs.com

기본동작코드

https://codepen.io/eond/pen/NWpGORM

https://codepen.io/ezra_siton/pen/wvwReJr

Swiper.js 슬라이더 안에 youtube 영상 넣기[JS]

https://velog.io/@awesomelon/Swiper.js-%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%8D%94-%EC%95%88%EC%97%90-youtube-%EC%98%81%EC%83%81-%EB%84%A3%EA%B8%B0

간단하게 iframe으로 넣어서 사용하는 방법도 있습니다.

https://codepen.io/aslhnates/pen/VOVNvb

Thanks to 상민님 ㅠㅠ

http://youtube.com/embed/{$youtube_id}?enablejsapi=1&version=3&playerapiid=player

가져온 샘플url에 autoplay=0이 있었는데 그거 때문에 안됐었네요 ㅠㅠㅠ

2021-05-12 19:52분 해결 ㅠ

참고 레퍼런스

https://developers.google.com/youtube/iframe_api_reference?hl=ko

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

https://stackoverflow.com/questions/57965180/how-to-pause-youtube-video-on-slide-change

https://velog.io/@awesomelon/Swiper.js-%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%8D%94-%EC%95%88%EC%97%90-youtube-%EC%98%81%EC%83%81-%EB%84%A3%EA%B8%B0

https://m.blog.naver.com/PostView.nhn?blogId=hulint&logNo=220054090991&proxyReferer=https:%2F%2Fwww.google.com%2F

https://kunoo.tistory.com/entry/Tip-Youtube-iframe-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EC%A0%9C%EC%96%B4