유튜브 영상 퍼올때 사이즈 수정 반응형으로 적용하는 방법 /iframe/HTM

유튜브 영상 퍼올때 사이즈 수정 반응형으로 적용하는 방법 /iframe/HTML

얼마전까지만해도 유튜브에서 퍼가기(공유)를 할때 동영상의 크기를 지정하는 탭이 있었지만, 현재는 유튜브에서 지원하지 않고 있다.

굉장히 유용했던 기능이었는데 왜 지원하지 않고 있을까?

 

사용자 입장에선 유튜브 방침을 따르는 수밖에 없다.

아쉽지만 어쩔 수 없는 법!

 

그렇다면 요즘 홈페이지 혹은 블로그 등의 웹페이지들 모두 '반응형'이라는 최신 트랜드를 쫓고있다.

(아직까지 웹사이트가 반응형이 아니라면..... 트랜드에 뒤쳐져있다고 생각하면 된다. 물론 특수한 웹사이트의 경우는 제외된다.)

 

 

위 이미지처럼 유튜브에서 '공유' 버튼을 누르면 해당 창이 팝업되는데, 이때 '퍼가기'를 누르면,

 

 

동영상 퍼가기 아래에 iframe 코드가 생성된다.

해당 코드를 복사해서 붙여넣기를 해주면 다음과 같이 영상을 공유할 수 있다.

 

 

 

기본으로 제공되는 코드를 복사하면 이렇게 영상을 퍼올 수 있게 된다.

하지만 여기서 문제는 바로 영상의 크기!!

 

 

코드를 보면 width="560" height="315"가 영상 출력 해상도를 뜻한다고 보면 됩니다.

영상의 크기가 해당 사이즈로 고정되어있음을 뜻하기에 요즘처럼 다양한 출력 형태로 보여질때 최적화되지 못할수 있다는 것을 의미하기도 합니다.

 

이때에는 코드를 수정하여 반응형 코드로 수정하면 훨씬 쾌적한 환경에서 영상 재생이 가능하게끔 됩니다.

 

 

<div style="position: relative; max-width: 100%; padding-bottom: 56.25%; height: 0;">

<iframe width="640" height="360" src="https://www.youtube.com/embed/6WI55qqQ72g" frameborder="0" allowfullscreen="" style="position: absolute; position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe>

</div>

 

 

여기에서 중요한 코드는

padding-bottom: 56.25%   (참고로 영상비가 16:9 일 경우 56.25% , 4:3 영상비일 경우 75%)

 

width="640" height="360" 영상 크기를 말합니다.

 

 

 

해당 영상을 PC에서 보실 경우 창의 크기를 조절해보시고, 그 외에도 다양한 크기의 모바일기기로 확인해보시면 다름을 확인할 수 있을 겁니다.