| [ 너튜브 깔끔반응형 + 이미지스킨 + 올림이미지 ] |
<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:70%; margin-top:8%; margin-left:-15%; } .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; } .yt-img { position:absolute; max-width:43%; right:0px; } </style> <div class="skin-div"> <img src="배경png경로"> <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> <img class="yt-img" src="올림png경로"> </div>
|
1. 이미지는 모두 png 로 만들어 주세요.
2. 배경스킨 이미지는 반드시 가로사이즈가 1000 픽셀이어야 합니다. 세로사이즈는 적당히 주세요. https://blog.kakaocdn.net/dn/cUPpx0/btrMjtWQykp/MuHHm9B56JVO86j9KBDQbK/img.png
3. 위로 올리는 이미지는 포토샵에서 펜툴 등으로 따서 만듭니다. 세로 사이즈는 배경스킨 이미지와 동일해야 하고 가로 사이즈는 컨텐츠에 맞추어서 적당히 줍니다. https://blog.kakaocdn.net/dn/39lGR/btrMkg3GnFp/3fFNAIK1PAcVvUKRsd9hH0/img.png
4. 보라색 20 : 이미지의 라운드 수치입니다.
5. 초록색 70 : 동영상의 가로 퍼센트입니다 100 을 주면 꽉 차게 됩니다.
6. 파란색 : margin-top:8%; margin-left:-15%; --- 8, -15를 0, 0 으로 주면 정중앙에 위치합니다. margin-top 에 -20 을 주면 퍼센트만큼 상단으로 이동하고 그냥 20 을 주면 퍼센트만큼 하단으로 이동합니다. margin-left 에 -20 을 주면 퍼센트만큼 좌단으로 이동하고 그냥 20 을 주면 퍼센트만큼 우단으로 이동합니다.
7. 노란색 10 : 동영상의 라운드 수치입니다.
8. 주황색 0.9 : 동영상의 투명도입니다. 0 부터 1 까지의 값을 가집니다.
9. 빨간색 43 : 올림이미지의 가로 나누기 10 한 값입니다. 만일 345 픽셀이 가로 사이즈라면 34.5 로 입력합니다.
10. 분홍색 right : 올림이미지를 좌측으로 붙일 경우 left 를 주고 우측으로 붙일 경우 right 를 줍니다.
|
원페이지 - https://www.youtube.com/watch?v=R3Fwdnij49o
|
첫댓글