유튜브 반응형 + 깔끔형 형태 3가지
유튜브 깔끔반응형은 모든 버튼이나 컨트롤러가 보이지 않고
동영상 자체버튼 형식으로 기능하면서 pc와 모바일에 모두 반응형으로 표현되는 방식입니다.
----------
1. 기본 깔끔반응형
[code]
<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>
[/code]
예제 페이지 - https://cafe.daum.net/gnuworld/ZMgZ/4
----------
2. 깔끔반응형 상하단 뻘여백 절단
예제 및 설명 - https://cafe.daum.net/gnuworld/ZMgZ/5
----------
3. 깔끔반응형 상하좌우 뻘여백 절단
예제 및 설명 - https://cafe.daum.net/gnuworld/ZMgZ/6
댓글 24개
우클릭은 막아야겠어요.
안녕하세요. 지금 소스보고 테스트 하고 있습니다.
그런데 저의 크롬 브라우져에서 보면 이렇게 보여지구요.
그리고 다른 소스를 보면 아래처럼 나옵니다.
요게 소스가 막혀서인지 아니면 새션문제인지는 모르겠지만 아래처럼 정상적이다가 위처럼 상하부분이 이렇게 나와요.
게시판 목록
그누보드5 팁자료실
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 2695 | 1개월 전 | 171 | ||
| 2694 | 1개월 전 | 134 | ||
| 2693 | 1개월 전 | 143 | ||
| 2692 | 1개월 전 | 158 | ||
| 2691 | 1개월 전 | 312 | ||
| 2690 | 1개월 전 | 217 | ||
| 2689 |
 SIR개발팀 |
1개월 전 | 424 | |
| 2688 | 1개월 전 | 275 | ||
| 2687 |
선택과집중
|
1개월 전 | 313 | |
| 2686 | 1개월 전 | 275 | ||
| 2685 | 1개월 전 | 330 | ||
| 2684 | 2개월 전 | 462 | ||
| 2683 | 2개월 전 | 261 | ||
| 2682 | 2개월 전 | 287 | ||
| 2681 |
선택과집중
|
2개월 전 | 263 | |
| 2680 | 2개월 전 | 313 | ||
| 2679 |
 Xenon54 |
2개월 전 | 417 | |
| 2678 |
Xenon54 |
2개월 전 | 487 | |
| 2677 | 2개월 전 | 312 | ||
| 2676 | 2개월 전 | 287 | ||
| 2675 |
선택과집중
|
2개월 전 | 464 | |
| 2674 |
 ideaman |
2개월 전 | 309 | |
| 2673 | 2개월 전 | 322 | ||
| 2672 | 2개월 전 | 272 | ||
| 2671 | 2개월 전 | 244 | ||
| 2670 | 2개월 전 | 356 | ||
| 2669 | 2개월 전 | 274 | ||
| 2668 |
선택과집중
|
2개월 전 | 470 | |
| 2667 |
선택과집중
|
2개월 전 | 455 | |
| 2666 |
선택과집중
|
3개월 전 | 388 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기