유튜브 동영상 반응형 사이트에 적용하기 (width:100%)

▒ 유튜브 동영상 반응형 사이트에 적용하기 (width:100%)

 

반응형에서는 각 기기마다 보여주는 동영상의 크기가 다르기 때문에 비율이 조금만 틀어져도 나머지 영역이 까맣게 출력되는 것을 경험해봤을 것이다. (챙피하지만 한때는 각 사이즈별로 동영상 크기를 조절하느라 애먹은 적도 있었다.)

그러나 이러한 문제를 한번에 해결할 수 있는 <style>이 있다.

(그동안 삽의...삽의 삽질)

 

유튜브 동영상 소스퍼오기

유튜브는 영상 오른쪽 하단에 [공유]버튼을 클릭 후  <> 퍼가기를 누르면 쉽게 html코드를 얻을 수 있다.

(<iframe>형식제공)

 

 

<iframe>태그 적용

 

<style>
.Video_Container {
  position:relative;
  height:0;
  padding-bottom:56.25%;
  overflow:hidden}
  
 .Video_Container iframe {
   position:absolute;
   width:100%;
   height:100%;
   top:0%;
   left:0%;
  }
</style>

<div class="Video_Container">
  <iframe>유튜부동영상주소</iframe>
 </div>

 

이제 웹페이지의 가로 크기에 따라 가변적으로 동영상의 크기가 변하는 것을 알 수 있다.

<embed> <object> 모두 동일한 방법으로 사용이 가능하나 이 두 태그는 요즘 거의 사용하지 않는다.

 

 

 

<video>태그 적용 / 유튜브가 아닌 동영상 파일을 직접 업로해서 쓸 때

 

<style>
.MyVideo {width:100%;max-width:100%;height:auto;}
</style>

<video class="Myvideo">
   <source src="" type="video/mp4">
   ...
   ...
</video>

 

너무 간단하쥬?

그럼 모두 즐코딩 ^^