유튜브 동영상 추가하기(feat. iframe)

우리는 이미지를 화면 사이즈의 변함에 따라 꽉 차게 작업할 때

img {width: 100%; height: auto;} 혹은 img {max-width: 100%; height: auto;}를 사용한다.

 

그렇다면 동영상에도 그렇게 적용할 수 있을까?

 

정답은 NNNNN

동영상, 특히 유튜브를 퍼온다면 <iframe>을 사용하게 되는데 이미지처럼 height: auto가 적용되지 않는다.

---

유튜브 동영상을 화면 사이가 변함에 따라 & 비율에 맞게 적용하려면?

조건1. 화면 사이즈가 반응형되더라도 비율에 맞추어 항상 꽉찬 화면 제공한다.

조건2. 유튜브가 제공하는 16:9 비율에 맞추되 상하에 검정 여백 없이 삽입한다.

 

문제점 분석

<iframe>에 넓이를 주든 높이를 주든 고정된 값이다.

화면이 커지면 검정 여백이 생기고, 작아지면 영상이 잘린다.

넓이, 높이가 유동적이어야만 화면에 항상 꽉 차게 들어간다.

 

--- 유튜브 <iframe> 퍼오는 방법 ---

유튜브 퍼오기 공유 버튼 클릭

 

유튜브 퍼오기 공유 방법 선택

유튜브 퍼오기 동영상 소스 복사

스크립트로 작업하고 싶지 않다.

CSS 만으로 해결하려면... 어찌 보면 미봉책인 해결 방법만 있다.

 

해결 방법은?

화면 사이즈가 변함에 따라 부모 요소를 16:9 화면으로 고정시킨다.

=> 고정시키는 방법은 높이를 0을 주어 빈 박스로 만들고, 높이 대신 padding-bottom을 비율에 맞게 %로 주어 유동적이게 만든다.

자식 요소인 <iframe>요소를 부모 요소에 꽉 차게 보여준다.

 

16:9 화면 비율 계산

div {
	position: relative;
	height: 0;
	padding-bottom: 56.25%;
}
div iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

* position을 추가하는 이유는 부모 요소의 높이가 0이기 때문에 자식 요소 iframe을 인식하지 못한다.

   iframe을 absolute로 띄워 부모로부터 자식임을 인지하게 만들고, iframe에게 기준값이 되는 부모를 알려준다.

 

• 화면크기가 변하더라도 검정 여백이 발생하지 않고 꽉 차게 보인다.
• 9:16화면이라면 padding-bottom: 177.777%;을 적용한다.