유튜브 반응형 + 깔끔형 형태 3가지 > 그누보드5 팁자료실

그누보드5 팁자료실

유튜브 반응형 + 깔끔형 형태 3가지 정보

유튜브 반응형 + 깔끔형 형태 3가지

본문

 

유튜브 깔끔반응형은 모든 버튼이나 컨트롤러가 보이지 않고

동영상 자체버튼 형식으로 기능하면서 pc와 모바일에 모두 반응형으로 표현되는 방식입니다.

 

----------

 

1. 기본 깔끔반응형


<style>
.yt-div { max-width:100%; margin:0 auto; }
.yt-div div { position:relative; padding-top:56.25%; overflow:hidden; border-radius:10px; }
.yt-div iframe { display:block; width:100%; height:400%; position:absolute; top:-150%; }
</style>
<div class="yt-div"><div>
<iframe src="https://www.youtube.com/embed/?playlist=고유아이디&loop=1&autoplay=1&vq=highres" allow=autoplay frameborder=0 allowfullscreen></iframe>
</div></div>

예제 페이지 - https://cafe.daum.net/gnuworld/ZMgZ/4

 

----------

 

2. 깔끔반응형 상하단 뻘여백 절단

예제 및 설명 - https://cafe.daum.net/gnuworld/ZMgZ/5

 

----------

 

3. 깔끔반응형 상하좌우 뻘여백 절단

예제 및 설명 - https://cafe.daum.net/gnuworld/ZMgZ/6

추천
8

댓글 23개

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

회원로그인

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