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

fm25

프로필 보기 이 회원 글보기 이 회원의 댓글보기

· 7년 전 · 조회 6018 6018 · 댓글 15 15

링크

http://internationale.kr (370)

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

#PC용 #모바일용

첨부파일

2018.05.29_01.png (11.3 KB) 0회 2018-05-29 09:44 포인트 차감 500

wr_av_2018.05.29.7z (34.4 KB) 38회 2018-05-29 09:41 포인트 차감 500

글쓰기

댓글 15개

혜민이아빠

프로필 보기 이 회원 글보기 이 회원의 댓글보기

7년 전

감사합니다. ^^

비스다름

프로필 보기 이 회원 글보기 이 회원의 댓글보기

7년 전

감사합니다. 도전 해보겠습니다.^^

끝없는사랑

프로필 보기 이 회원 글보기 이 회원의 댓글보기

7년 전

좋으네요

프로헤리

프로필 보기 이 회원 글보기 이 회원의 댓글보기

7년 전

감사합니다

김탁후

프로필 보기 이 회원 글보기 이 회원의 댓글보기

7년 전

좋은 정보 감사합니다.~

김철용

프로필 보기 이 회원 글보기 이 회원의 댓글보기

7년 전

감사합니다, 아주 유용하게 사용할 수있겠습니다.

휴먼

프로필 보기 이 회원 글보기 이 회원의 댓글보기

7년 전

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

테스트하는 동안의 임시 주소입니다.
http://ricewine.huso.kr/bbs/board.php?bo_table=z3_2&wr_id=1&device=mobile

fm25

프로필 보기 이 회원 글보기 이 회원의 댓글보기

7년 전

글쎄요. 잘 보이고 잘 들립니다만...
아이폰 구형 5와 비슷한 'iPhone SE'입니다.

휴먼

프로필 보기 이 회원 글보기 이 회원의 댓글보기

7년 전

잘 나옵니까?, 그런데, 안드로이드 2가지 모델에서는 화면이 나오지 않는데요?
갤럭시 구형입니다.
무엇이 문제일지, 어떻게 해야 할지 ...

휴먼

프로필 보기 이 회원 글보기 이 회원의 댓글보기

7년 전

비메오 동영상은 아무리 해도 안되고 해서, 유투브에 올려서 유투브 영상으로 바꾸었습니다.

숙향

프로필 보기 이 회원 글보기 이 회원의 댓글보기

6년 전

[http://sir.kr/data/editor/1908/4be069080de1317a4ab905cae8e32884_1566824206_7328.jpg]
잘되고있읍니다.감사합니다.잘사용하겠읍니다.

커피넉잔

프로필 보기 이 회원 글보기 이 회원의 댓글보기

6년 전

감사합니다.

커피넉잔

프로필 보기 이 회원 글보기 이 회원의 댓글보기

6년 전

음~ 다 좋은데 유튜브 썸네일이 크기조정이 안되네요~ 300 x 300 으로 맞춰져 있는데도 가로 비율에 맞춰줘 높이 조정이 안되네요~ 유튜브 썸네일 불러올때 썸네일 크기 조정 할수있는 방법이 있는지요?

커피넉잔

프로필 보기 이 회원 글보기 이 회원의 댓글보기

6년 전

$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;}

넣어주면 유튜브 썸네일도 크기조정 가능하네요~
단, 위치조정은 해주셔야 합니다.