이 스킨은 웹학교님이 공개한 스킨 "iframe형태보다 224배 더 빠른 유튜브게시판(https://sir.kr/g5_skin/43774?sfl=wr_subject%7C%7Cwr_content&stx=%EC%9B%B9%ED%95%99%EA%B5%90)"에 비타주리님의 내 맘대로 썸네일 Basic형 게시판의(https://sir.kr/g5_skin/47189?sfl=wr_subject%7C%7Cwr_content&stx=%EB%B9%84%ED%83%80%EC%A3%BC%EB%A6%AC) 코드를 합친 것입니다.

웹학교님의 스킨에는 list에 썸네일 이미지가 나오지 않아서 아쉬웠는데, 마침맞게 공개해주신 비타주리님의 코드를 합친 것입니다.
좋은 스킨을 공개해주신 웹학교님과 비타주리님께 감사드립니다.

<<사용방법>>

1. 그누보드 순정을 사용하시는 경우에 다음의 경로로 업로드해줍니다.
압축을 풀면 liteyoutube_list_img_mobile, liteyoutube_list_img_pc 두개의 폴더가 나옵니다.
 liteyoutube_list_img_mobile은 mobile/skin/board 폴더에 업로드합니다.
 liteyoutube_list_img_pc은 skin/board/board 폴더에 업로드합니다.

2. 글쓰기에서 썸네일 주소는 이미지가 위치한 경로를 적어줍니다. 이미지가 네이버블로그 등 다른 위치에 있는 경우에는 그 경로를 적어줍니다.
썸네일 이미지경로를 입력하지 않으면 list에서 이미지가 나타나지 않고 바로 제목이 출력됩니다.
<예> 이미지를 http://domain.co.kr/images/suzy.png의 경로로 업로드한 경우는 썸네일주소 란에 http://domain.co.kr/images/suzy.png을 적어줍니다.
<예> https://blog.kakaocdn.net/dn/dpxDdN/btrdj677VT5/FP3chnNKIkRUSzrnNxCxXk/img.jpg

3. 유튜브 아이디는 유튜브영상의 고유아이디를 적어줍니다.
<예> 예)https://www.youtube.com/watch?v=WGIE7qS71Po 주소에서   WGIE7qS71Po  가 Youtube ID입니다.

유튜브영상의 썸네일 추출하기: <예: 트와이스의 치어업>
https://img.youtube.com/vi/c7rCyll5AeY/mqdefault.jpg 에서 고유아이디인 c7rCyll5AeY 부분이 썸네일입니다. 원하는 영상의 고유아이디를 https://img.youtube.com/vi/고유아이디/mqdefault.jpg 에 넣어서 주소창에 입력하면 썸네일이 나옵니다. 다운로드하여 사용하시거나 이 경로를 썸네일주소에 넣으시면됩니다.
 

4. list에 나타나는 썸네일 크기를 조절하시려면 pc, mobile의 list.skin.php의 아래코드에서 width:120px; height:120px;를 조절하시면 됩니다.
<style>
.thumbnailImage { width:120px; height:120px; border-radius:20px; object-fit:cover; margin-left:10px; margin-right:10px; }
</style>

5. define('G5_GNUBOARD_VER', '5.4.18'); 에서 테스트하였습니다.
모바일은 안드로이드 갤럭시와 아이폰에서 테스트를 하였습니다. 
모바일에서 유튜브 영상을 재생하는 경우에 플레이버튼을 두번 눌러야 재생이 되는데 왜 그런지 잘 모르겠습니다.
pc와 pc_mobile버전에서는 한번만 클릭하면 바로 재생이 되는 것을 확인했습니다.

감사합니다^^