유튜브 반응형 깔끔하게 보기 > 그누보드5 팁자료실

그누보드5 팁자료실

유튜브 반응형 깔끔하게 보기 정보

유튜브 반응형 깔끔하게 보기

본문

아래처럼 스타일에서 클래스를 2개 만들고 normalPlayer 를 아이프레임에 주면 일반적인 반응형 유튜브 동영상이 만들어집니다.

 

<style>
    #mediaPlayer { position:relative; padding-bottom:56.25%; height:0px; overflow:hidden; max-width:100%; }
    .normalPlayer { position:absolute; top:0px; left:0px; width:100%; height:100%; display:block; }
    .cutPlayer { position:absolute; top:-100%; left:0px; width:100%; height:300%; display:block; }
</style>
<div id=mediaPlayer><iframe class=normalPlayer src=https://www.youtube.com/embed/T2ZNOZmdD-E?autoplay=1 frameborder=0 allowfullscreen></iframe></div>

 

----------

 

아래처럼 cutPlayer 를 아이프레임에 주면 상단의 타이틀과 하단의 광고부분이 잘려나간 깔끔한 영상을 볼 수 있습니다. 동영상 자체가 온오프 버튼이 되겠죠.

 

<style>
    #mediaPlayer { position:relative; padding-bottom:56.25%; height:0px; overflow:hidden; max-width:100%; }
    .normalPlayer { position:absolute; top:0px; left:0px; width:100%; height:100%; display:block; }
    .cutPlayer { position:absolute; top:-50%; left:0px; width:100%; height:200%; display:block; }
</style>
<div id=mediaPlayer><iframe class=cutPlayer src=https://www.youtube.com/embed/T2ZNOZmdD-E?autoplay=1 frameborder=0 allowfullscreen></iframe></div>

 

-----------

 

단 하단의 타이머나 트랙바, 볼륨바, 풀스크린버튼이 같이 잘려나갑니다.

그것이 필요한 경우에는 유튜브 API 를 사용하여 직접 만들어 써야 합니다.ㅜㅠ

예제는 리자님 동영상입니다.

 

예제 - http://www.mediaplayer.kr/main/tip/10

추천
16

댓글 24개

전체 2,411 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

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