크롬80버전 결제 이슈, 영카트5 주요패치 확인!

반응형 유튜브 플레이어(모바일호환) > 그누보드5 스킨

그누보드5
영카트5
매뉴얼
Q & A
제작의뢰
컨텐츠몰
부가서비스
소모임
커뮤니티

그누보드5 스킨

스킨 다운로드시 좋아요 클릭과 감사의 코멘트를 남기시면 제작자에게 큰 힘이됩니다. ^^y

반응형 유튜브 플레이어(모바일호환) 정보

레이아웃 반응형 유튜브 플레이어(모바일호환)

첨부파일

첨부파일 m.youtube_pl54.tar (14.0M) 7회 다운로드 2020-07-31 23:11:21 포인트 차감10
첨부파일 m.youtube.tar (14.0M) 4회 다운로드 2020-07-31 23:11:21 포인트 차감10
테스트한 버전5.4
호환 가능 버전모든 php 환경에 호환가능

본문

안녕하세요 두리삼촌입니다. 오랜만에 여러분께 인사드립니다.
이번에는 유튜브 플레이어를 모바일 환경에서 사용할수 있도록
반응형으로 수정하여 재배포 합니다.

 

샘플페이지: utf-8

http://eunsolee.net/m.youtube_pl54/youtubeplayer/player/index.php

 

샘플페이지: euc-kr

http://eunsolee.com/m.youtube/youtubeplayer/player/index.php

 

파일은 모두 두가지 입니다.

첫번째 파일은 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버전도 반응형으로 수정하여 다시 찾아뵙겠습니다.

추천7

댓글 전체

안녕하세요 ^^ 도움이 되신다니 다행입니다. 조만간 PC버전도 반응형으로 업데이트 하도록 하겠습니다. 현재 수정중이에요 >_< mp3 플레이어도 함께 업데이트 할거니까 많이많이 기대해 주세요 ^^
전체 1,828 |RSS
그누보드5 스킨 내용 검색

회원로그인

진행중 포인트경매

  1. 참여26 회 시작20.08.05 04:15 종료20.08.12 04:15
  2. 참여21 회 시작20.08.04 00:57 종료20.08.11 00:57

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

© SIRSOFT