유튜브 깔끔 반응형 + 이미지스킨 2가지 형태
1. 이미지스킨 기본형
[code]
<style>
.skin-div { display:flex; justify-content:center; align-items:center; position:relative; max-width:1000px; margin:0 auto; }
.skin-div img { display:block; width:100%; border-radius:20px; }
.yt-div { position:absolute; width:85%; margin-top:27%; margin-left:0%; }
.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%; opacity:0.9; }
</style>
<div class="skin-div">
<img src="이미지경로">
<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>
</div>
[/code]
코드설명 및 예제페이지 - https://cafe.daum.net/gnuworld/ZMgZ/7
-----------
2. 이미지스킨 응용형
코드설명 및 에제페이지 - https://cafe.daum.net/gnuworld/ZMgZ/8
댓글 14개
유용하게 잘 사용을 하겠습니다
감사합니다
비타주리님 정말 정말 좋아요 따봉!
게시판 목록
그누보드5 팁자료실
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 공지 | 3년 전 | 4402 | ||
| 2694 | 2개월 전 | 188 | ||
| 2693 | 2개월 전 | 148 | ||
| 2692 | 2개월 전 | 158 | ||
| 2691 | 2개월 전 | 174 | ||
| 2690 | 2개월 전 | 326 | ||
| 2689 | 2개월 전 | 233 | ||
| 2688 |
 SIR개발팀 |
2개월 전 | 440 | |
| 2687 | 2개월 전 | 292 | ||
| 2686 |
선택과집중
|
2개월 전 | 329 | |
| 2685 | 2개월 전 | 291 | ||
| 2684 | 2개월 전 | 346 | ||
| 2683 | 2개월 전 | 481 | ||
| 2682 | 2개월 전 | 276 | ||
| 2681 | 2개월 전 | 302 | ||
| 2680 |
선택과집중
|
2개월 전 | 278 | |
| 2679 | 2개월 전 | 330 | ||
| 2678 |
 Xenon54 |
3개월 전 | 429 | |
| 2677 |
Xenon54 |
3개월 전 | 502 | |
| 2676 | 3개월 전 | 326 | ||
| 2675 | 3개월 전 | 304 | ||
| 2674 |
선택과집중
|
3개월 전 | 480 | |
| 2673 |
 ideaman |
3개월 전 | 322 | |
| 2672 | 3개월 전 | 335 | ||
| 2671 | 3개월 전 | 284 | ||
| 2670 | 3개월 전 | 260 | ||
| 2669 | 3개월 전 | 374 | ||
| 2668 | 3개월 전 | 289 | ||
| 2667 |
선택과집중
|
3개월 전 | 483 | |
| 2666 |
선택과집중
|
3개월 전 | 470 | |
| 2665 |
선택과집중
|
3개월 전 | 404 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기