반응형 유튜브 플레이어(모바일호환) 정보
레이아웃 반응형 유튜브 플레이어(모바일호환)관련링크
첨부파일
본문
안녕하세요 두리삼촌입니다. 오랜만에 여러분께 인사드립니다.
이번에는 유튜브 플레이어를 모바일 환경에서 사용할수 있도록
반응형으로 수정하여 재배포 합니다.
파일은 모두 두가지 입니다.
첫번째 파일은 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버전도 반응형으로 수정하여 다시 찾아뵙겠습니다.
10
댓글 전체
잘 사용하고 있는 1인 입니다.