vimeo 작업하면서 정리한 iframe 사용 방법

1. vimeo 활용

1. 영상 링크 형식

   https://player.vimeo.com/video/숫자아이디?속성=값&속성=값

2. 영상 속성 지정: 링크 뒤에 ? 추가, 속성 추가할 때마다 & 사용

• 자동재생 autoplay=1

• 음소거 muted=1
  자동재생을 활성화할 경우 추가

• 자동정지 autopause=0
  특정 페이지에 자동 재생 동영상이 하나 이상 있는 경우 추가

• 반복재생 loop=1

• 컨트롤러 보이기 controls=true

2. iframe 크기 조절

가로세로 비율과 object fit 고려하며 크기 조절하기

2.1 가로 기준으로 세로 cover

<div class="wrapper">
  <iframe src="링크 주소" class="inner"></iframe>
</div>

.wrapper {
	 position: relative;
     width: 100%;
     padding-bottom: 56.25%; /* 16:9 일반 영상 비율 */
}
.inner {
	position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

2.2 세로 기준으로 가로 cover

<div class="container">
	<div class="wrapper">
  		<iframe src="링크 주소" class="inner"></iframe>
	</div>
</div>

.container {
	position: relative;
    width: 50vw; /* 너비 지정 */
    height: 50vh; /* 높이 지정 */
    overflow: hidden;
}
.wrapper {
	position: absolute;
	width: 100%;
	height: 300%; /* 기준 높이 100%에 위아래로 100% 추가 */
    top: -100%; /* 맨 밑에서 100% 높이만큼 올려서 가운데 맞춤 */
    left: 0;
}
.inner {
    position: absolute;
	width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

📖 참고자료

Autoplay and loop embedded videos
FullScreen YouTube Video Background In Pure CSS