[CSS] 반응형 웹에 유튜브 영상 검은색 여백없이 넣는 방법

문제

내가 만들고 있는 웹사이트에 유튜브 영상을 넣고 싶다면, 어떻게 해야할까?

퍼가고 싶은 유튜브 영상을 우클릭 후 '소스 코드 복사'를 누르고 html에 그대로 붙여넣기해주면, 간단하게 유튜브 영상을 웹 내부에 옮길 수 있게 된다.

 

그런데 반응형 웹사이트에서는 이대로 끝나게 되면, 반응형에 맞춰 영상이 움직이기 보다는 영상 본래 크기 그대로, 검은 여백 그대로 보이게 돼서 반응형에 깔끔하게 떨어지지 않게 보인다.

웹사이트를 늘리고 줄일 때 마다 영상이 검은 여백없이 딱 떨어지게 하고 싶으면 어떻게 해야할까?

 

(▲ 반응형 웹사이트에서 늘리고 줄여도 유튜브 영상 내에 검은색 여백없이 딱 떨어지는 모습)

 

해결

마법의 숫자 56.25%

<div class="video_box">
	<iframe src="https://www.youtube.com/embed/JLhbTGzE6MA
    ?autoplay=1&mute=1&loop=1&playlist=JLhbTGzE6MA&controls=0" 
    title="YouTube video player" frameborder="0" allow="accelerometer;
    autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"></iframe>
</div>

html은 전체 div인 video_box 클래스 안에 유튜브 소스 (iframe) 태그를 넣었다.

 

.video_box {
    width: 100%;
    height: 0;
    padding-top: 56.25%; /* 가장 중요 */
    position: relative;
}

.video_box iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

 

1) 반응형에 맞게 전체 div에 width 값 100%를 주었고, height 값은 0으로 하는 대신 padding-top(bottom)을 56.25%를 준다. 여기서 56.25%는 유튜브 영상 비율인 16:9에 맞춰서 매긴 비율이며, 규칙이니 알아두면 좋다.

(참조 - https://coolestguidesontheplanet.com/videodrome/youtube )

 

2) iframe에 너비와 높이 값 모두 100%를 주고, position 값을 absolute로 준다. 여기서 가장 중요한 것은 전체 div에 padding 값을 준다는 점과 유튜브 영상에 absolute를 준다는 점이다.

 

알아두면 좋은 유튜브 영상 태그

<div class="video_box">
	<iframe src="https://www.youtube.com/embed/JLhbTGzE6MA
    ?autoplay=1&mute=1&loop=1&playlist=JLhbTGzE6MA&controls=0" 
    title="YouTube video player" frameborder="0" allow="accelerometer;
    autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"></iframe>
</div>

위에 html 태그를 다시 보자. iframe 안에 여러 가지 복잡한 소스가 있는데, 여기서 우리가 알면 좋을만한 몇 가지 태그들을 정리해보았다.

 

자동 실행	"https://www.youtube.com/embed/고유코드?autoplay=1"
반복 실행	"https://www.youtube.com/embed/고유코드?loop=1&playlist=고유코드"
음소거 실행	"https://www.youtube.com/embed/고유코드?mute=1"
컨트롤 바 숨기기	"https://www.youtube.com/embed/고유코드?controls=0"

 

여기서 고유코드란 영상마다 부여되는 코드로 이 고유코드 뒤에 '?'로 구분을 지은 후, 이 뒤로 위의 표에 있는 내용들을 써넣으면 된다. 여러 가지 태그를 쓸 경우 '&'로 끊어서 구분을 지어주기만 하면 된다.

개인적으로 위에 정리한 4개 정도가 자주 쓰는 유튜브 태그라고 생각하며, 이외에도 다양한 유튜브 태그들이 많이 있다.