비

유튜브 깔끔 반응형 + 이미지스킨 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개

더욱 좋아요. 감사 합니다.
@들레아빠 늘 격려 주셔서 감사합니다.
너무 좋아요

유용하게 잘 사용을 하겠습니다
감사합니다
@몽당s연필 연필님 감사합니다.
끼야아아아아 스킨의 예술화~
비타주리님 정말 정말 좋아요 따봉!
@쪼각조각 별 것 아니에요. 감사합니다.
유용한 자료 감사합니다.
@동물원 감사합니다
너무 좋아요. 감사합니다~!!!
@eoduddld123 감사합니다
@카일1808 감사합니다
@써맨 감사합니다
댓글을 작성하시려면 로그인이 필요합니다.
+
제목 글쓴이 날짜 조회
22-10-04 조회 8,368
22-09-28 조회 7,609
22-09-28 조회 6,682
22-09-27 조회 1.1만
22-09-17 조회 8,047
22-09-15 조회 8,452
22-09-15 조회 6,579
22-09-08 조회 7,692
22-09-07 조회 7,617
22-09-05 조회 7,022
22-09-04 조회 6,982
22-09-02 조회 6,541
22-09-01 조회 7,069
22-08-29 조회 8,796
22-08-29 조회 7,870
22-08-24 조회 6,256
22-08-12 조회 7,242
22-08-04 조회 8,489
22-08-01 조회 7,425
22-07-30 조회 6,685
22-07-30 조회 6,352
22-07-28 조회 6,792
22-07-27 조회 7,936
22-07-25 조회 7,685
22-07-19 조회 7,867
22-07-08 조회 7,560
22-07-06 조회 7,625
22-07-06 조회 8,419
22-07-05 조회 7,950
22-07-05 조회 8,067