유튜브 깔끔 반응형 + 이미지스킨 2가지 형태 > 그누보드5 팁자료실

그누보드5 팁자료실

유튜브 깔끔 반응형 + 이미지스킨 2가지 형태 정보

유튜브 깔끔 반응형 + 이미지스킨 2가지 형태

본문

 

1. 이미지스킨 기본형

 


<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>

 

코드설명 및 예제페이지 - https://cafe.daum.net/gnuworld/ZMgZ/7

 

-----------

 

2. 이미지스킨 응용형

 

코드설명 및 에제페이지 - https://cafe.daum.net/gnuworld/ZMgZ/8

추천
7

댓글 14개

전체 2,411 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT