유튜브 반응형 + 깔끔형 형태 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
댓글 24개
오랬만 입니다. 감사 드려요.
@들레아빠 들레아빠님 늦었지만 명절인사 드립니다.
@비타주리 네 고향 산청 다녀 왔습니다. 고맙습니다.
유용하네요!! 감사합니다. ^^
@아이스웨덴™ 아이스웨덴님도 늦었지만 명절 인사 드립니다.
감사합니다. ^^
@rlawhd 감사합니다. ^^
깔끔
@마당쇠151 예 깔끔형이니까요
비타주리님께서는 그누보드 배, 노벨상을 받으셔야 마땅합니다.
@라온헤윰 어이구 이런 과분한 말씀을...
감사합니다.
@크리스휘 감사합니다.
멋지고 좋은 팁 주셔서 감사합니다.
@청구 어이쿠 감사합니다.
감사합니다.
@브러운아이 감사합니다
감사합니다.
@앱빌더 감사합니다
멋지다는 말 밖에 할 게 없네요. :-)
우클릭은 막아야겠어요.
우클릭은 막아야겠어요.
@쪼각조각 어차피 전체공개 포스팅이에요. 늘 감사합니다.
좋은 소스 감사합니다 :)
@밀레드 감사합니다.
안녕하세요. 지금 소스보고 테스트 하고 있습니다.
그런데 저의 크롬 브라우져에서 보면 이렇게 보여지구요.
그리고 다른 소스를 보면 아래처럼 나옵니다.
요게 소스가 막혀서인지 아니면 새션문제인지는 모르겠지만 아래처럼 정상적이다가 위처럼 상하부분이 이렇게 나와요.
