유튜브 반응형 + 깔끔형 형태 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
8
댓글 23개
오랬만 입니다. 감사 드려요.
@들레아빠 들레아빠님 늦었지만 명절인사 드립니다.
@비타주리 네 고향 산청 다녀 왔습니다. 고맙습니다.
유용하네요!! 감사합니다. ^^
@아이스웨덴™ 아이스웨덴님도 늦었지만 명절 인사 드립니다.
감사합니다. ^^
@rlawhd 감사합니다. ^^
깔끔
@마당쇠151 예 깔끔형이니까요
비타주리님께서는 그누보드 배, 노벨상을 받으셔야 마땅합니다.
@라온헤윰 어이구 이런 과분한 말씀을...
감사합니다.
@크리스휘 감사합니다.
멋지고 좋은 팁 주셔서 감사합니다.
@청구 어이쿠 감사합니다.
감사합니다.
@브러운아이 감사합니다
감사합니다.
@앱빌더 감사합니다
멋지다는 말 밖에 할 게 없네요. :-)
우클릭은 막아야겠어요.
우클릭은 막아야겠어요.
@쪼각조각 어차피 전체공개 포스팅이에요. 늘 감사합니다.
좋은 소스 감사합니다 :)
@밀레드 감사합니다.