반응형 유튜브 플레이어(모바일호환)
링크
https://sunday.iwinv.net/bbs/board.php?bo_table=bbs_005&wr_id=15 (397) https://sunday.iwinv.net/bbs/board.php?bo_table=bbs_005 (296)안녕하세요 두리삼촌입니다. 오랜만에 여러분께 인사드립니다.
이번에는 유튜브 플레이어를 모바일 환경에서 사용할수 있도록
반응형으로 수정하여 재배포 합니다.
파일은 모두 두가지 입니다.
첫번째 파일은 euc kr
두번째 파일은 utf-8 버전입니다. 그누보드 사용자 분들은 대부분 utf-8 문자셋이나
간혹 php의 버전문제로 euc-kr 버전이 필요한분도 계실듯해서 두가지로 올립니다.
01. 유튜브 영상의 가로 및 세로 크기 수정.
list_01.php등과 같은 파일을 편집기로 열어서 보시면
222번과 223번줄에 전체 가로와 세로 크기를 설정하는 부분이 있습니다.
{
playlistOptions: {
autoPlay: true },
supplied: "webmv, ogv, m4v, oga, mp3",
size: {
width: "100%",
height: "210px",
cssClass: "jp-video-360p"
},
smoothPlayBar: true,
keyEnabled: false });
위 부분을 수정하시면 됩니다.
02. 플레이어를 출력하는 리스트 페이지의 수정.
index.php를 포함한 각 플레이어 출력파일 play_01.php 부터 play_05.php 파일 속성에서
13번째줄 max-width: 100%; 부분을 수정하시면 됩니다.
03. 유튜브 영상의 Responsive(반응형) 크기설정.
dist/skin/blue.monday/css/jplayer.blue.monday.css 를 편집기등으로 여신후
49번줄 width: 100%;
53번줄 width: 100%; 와 같이 수정하시면 브라우저의 크기와 관계없이
영상이 각각 크기에 맞춰 반응형으로 보여집니다.
04. 플레이어의 폰트사이즈
dist/skin/blue.monday/css/jplayer.blue.monday.css 를 편집기등으로 여신후
32번째줄
font-size: 21px; 부분을 수정해주세요
기타 궁굼하신 사항은 댓글을 남겨주세요.
감사합니다. 곧 PC버전도 반응형으로 수정하여 다시 찾아뵙겠습니다.
버전 정보
첨부파일
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기
댓글 8개
잘 사용하고 있는 1인 입니다.