728x90
728x90
배경에 영상소스를 넣는 방법입니다
iframe 사용
<div class="iframe_wrap">
<iframe src="https://player.vimeo.com/video/852251726?autopause=false&autoplay=1&mute=1&loop=1&playlist=852251726&controls=0&rel=0&showinfo=0&showsearch=0&enablejsapi=1&&widgetid=1&background=1"></iframe>
</div>
#section1 .iframe_wrap {
position: relative;
overflow: hidden;
width: 100vw;
height: 100vh;
}
#section1 .iframe_wrap iframe{
position: absolute;
top: 50%;
left: 50%;
width: 100vw;
height: 100vh;
transform: translate(-50%, -50%);
border:none;
}
@media (min-aspect-ratio: 16/9) {
#section1 .iframe_wrap iframe {
/* height = 100 * (9 / 16) = 56.25 */
height: 56.25vw;
}
}
@media (max-aspect-ratio: 16/9) {
#section1 .iframe_wrap iframe {
/* width = 100 / (9 / 16) = 177.777777 */
width: 177.78vh;
}
}
반응형
'Code > Html' 카테고리의 다른 글
반전효과있는 마우스 커서 만들기 (0) | 2024.01.04 |
---|---|
Select 에서 Option 클릭 시 이동 (0) | 2023.12.11 |
탭 만들기 (페이지 내에서 사용하는) (0) | 2023.02.23 |
링크 이동하는 방법들 (a태그, onclick) (0) | 2023.01.27 |
홈페이지에서 신청 시 받는 메일 만들기 (폼메일) (0) | 2023.01.26 |