Lite Youtube Embed에 썸네일을 추가한 유튜브게시판 정보
게시판 Lite Youtube Embed에 썸네일을 추가한 유튜브게시판
관련링크
첨부파일
본문
이 스킨은 웹학교님이 공개한 스킨 "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버전에서는 한번만 클릭하면 바로 재생이 되는 것을 확인했습니다.
감사합니다^^
12
댓글 전체
유튜브아이디만 있으면 내 맘대로 썸네일 안 쓰고 자동으로 리스트에 유튜브 이미지가 보여지는 쉬운 코드가 있을 거에요.
지금보니 list.skin.php 에서
<img onerror=style.display='none' class=thumbnailImage src=<?php echo $list[$i]['wr_9']; ?>>
을 아래처럼...
<script>
document.write("<img onerror=style.display='none' class=thumbnailImage src=https://img.youtube.com/vi/<?php echo $list[$i]['wr_1']; ?>/mqdefault.jpg>");
</script>
어쨌거나 응용력이 대단하십니다.
예. 말씀하신대로 유튜브아이디를 입력하면 썸네일이 자동으로 추출되는 방법이 있으리라 보는데요. 아직 그 정도의 코드를 작성할 정도로 실력이 안되서요 ㅎㅎ
비타주니님의 스킨이나 팁을 보고 많이 배우고 있습니다. ^^
관심을 가져주셔서 감사드립니다. ^^
이전에 스킨을 공개한 분들이 대단한 분들입니다 ^^
감사합니다.^^
iframe을 통해서 유튜브영상을 재생하는 경우에는 아래처럼
<iframe width="420" height="345" src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1&mute=1">
</iframe>
autoplay=1처럼 정하면 자동으로 되는데 이 스킨은 iframe 사용하지 않는 방법인 것 같아서 저도 잘 모르겠습니다.
첨부한 lite-yt-embed.js 파일에 자동재생과 유튜브 재생방법이 정해져 있는것 같은데요.
자바스크립트 고수님들은 바로 아실텐데요.
이제 겨우 초보를 면해서 저도 궁금합니다.
