여분필드 활용 오디오/비디오 출력 스킨 > 그누보드5 스킨

그누보드5 스킨

좋은 댓글과 좋아요는 제작자에게 큰힘이 됩니다.

여분필드 활용 오디오/비디오 출력 스킨 정보

갤러리 여분필드 활용 오디오/비디오 출력 스킨

첨부파일

wr_av_2018.05.29.7z (34.4K) 38회 다운로드 2018-05-29 09:41:00 포인트 차감500

본문

 

https://sir.kr/g5_skin/9267

 

위 스킨을 5.3 버전에 맞게 수정했습니다.

 

 

2009578055_1527559317.7349.png


'여분필드 1'과 '여분필드 2'을 사용합니다.

 

'여분필드 1'에 동영상 소스를 입력합니다.


유튜브만 사용할 것 같으면... 간편히 주소만 입력하면 되는 방식으로 바꾸는 편이 낫겠으나
다른 형식의 비디오나 오디오들도 가능케 하기 위해... 직접 html 소스 입력 방식을 사용했습니다.

 

'여분필드 2'에 유튜브 동영상 ID를 넣어주면 자동으로 최신글에 썸네일로 출력됩니다.

 

https://www.youtube.com/watch?v=Lp8fhXd8lpo

 

'=' 뒷부분이 유튜브 ID입니다.

 

'소스코드'에서 보면...

 

... https://www.youtube.com/embed/Lp8fhXd8lpo" frameborder="0"...


유튜브 ID 대신 이미지를 '첨부파일'로 등록해도 됩니다.

 

 

2009578055_1527554699.4174.png

 

Basic 게시판입니다.
리스트에 썸네일을 출력했습니다. 그로 인해 좁아진 공간 때문에 일부 항목(추천, 비추천)을 배제했습니다.
혹 썸네일이 흐리게 출력된다면, list.skin.php 파일 상단의 규정과 게시판 설정의 썸네일 크기가 일치되게 설정합니다.

 


모바일은 좁은 화면을 고려하여 Basic에는 썸네일을 출력하지 않았습니다.

 


'여분필드'에 관한 설명은 아래 주소를 참고하세요. 

https://sir.kr/g5_tip/2181

 


'동영상 파일을 모바일에서 창 크기에 맞춰서 출력하기'에 관한 설명은 아래 주소를 참고하세요. 

https://sir.kr/g5_tip/1733
https://sir.kr/g5_tip/2024

 

해당 소스나 파일도 포함했습니다.

 

 

덧, SoundCloud의 경우는 iframe 소스가 너무 길어서 오류가 납니다.

사용하려면, 해당 게시판의 해당 여분필드의 속성을 'TEXT'로 바꿔주면 됩니다.

 

3696903406_1537962190.1402.png

추천
5

댓글 전체

좋은 스킨 감사합니다.
모바일에서 iframe 방식으로 유투브 동영상은 잘 플레이 됩니다.
그런데, 모바일에서 비메오 동영상은 영상 화면이 허연 백지로만 나타나고, 장님이 더듬거리듯이 하여 플레이가 눌러지면 사운드만 들리는데, 무슨 문제인지 알 수 있을까요?

테스트하는 동안의 임시 주소입니다.
http://ricewine.huso.kr/bbs/board.php?bo_table=z3_2&wr_id=1&device=mobile
잘 나옵니까?, 그런데, 안드로이드 2가지 모델에서는 화면이 나오지 않는데요?
갤럭시 구형입니다.
무엇이 문제일지, 어떻게 해야 할지 ...
음~ 다 좋은데 유튜브 썸네일이 크기조정이 안되네요~ 300 x 300 으로 맞춰져 있는데도 가로 비율에 맞춰줘 높이 조정이 안되네요~ 유튜브 썸네일 불러올때 썸네일 크기 조정 할수있는 방법이 있는지요?
$img_content = '<img class="ytb_img" src="http://img.youtube.com/vi/'.$list[$i]['wr_2'].'/0.jpg" alt="'.$thumb['alt'].'" width="'.$thumb_width.'" height="'.$thumb_height.'">';

유튜브 이미지소스에 class="ytb_img" 클래스를 주고

스타일에

#bo_gall .gall_img a{width:283px;height:283px;overflow:hidden;}
#bo_gall .gall_img img{max-width:100%;height:auto !important;}
#bo_gall .gall_img img.ytb_img{position:relative;top:-48px;left:-121px;max-width:none;width:506px !important;height:380px !important;}

넣어주면 유튜브 썸네일도 크기조정 가능하네요~
단, 위치조정은 해주셔야 합니다.
전체 232 |RSS
그누보드5 스킨 내용 검색 갤러리에서

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT