퍼블리싱 ] 유튜브 동영상 반응형 홈페이지에 삽입하기 (화면 너비에 맞게 100%로 만들기)

퍼블리싱 ] 유튜브 동영상 반응형 홈페이지에 삽입하기 (화면 너비에 맞게 100%로 만들기)

 

유튜브 동영상을 홈페이지에 삽입해야 되는데 그냥 퍼오기를 하면 width, height 너비가 고정되어 있기 때문에, 화면 너비에 따라 유동적으로 동영상 너비가 조절되지 않는다. 

이 문제를 스크립트를 사용하여 간단히 해결할 수 있는 방법이 있어서 소개하고자 한다. 

 

유튜브에서 동영상 퍼오기

우선 웹페이지에 삽입할 동영상을 퍼와야 되는데 콘텐츠 페이지 내에 삽입할 것이므로 iframe으로 된 소스를 가져와야 한다. 방법은 간단하니 가볍게 쓱~ 보시기 바란다.

 

동영상 퍼오기 1단계.

유튜브에서 퍼올 동영상의 우측 하단에 있는 '공유' 버튼을 클릭한다. (필자가 좋아하는 서태지 공연 동영상으로 예시를 들겠다😆)

유튜브 동영상 퍼오기 1단계 - 동영상 하단의 '공유' 버튼 클릭

 

 

동영상 퍼오기 2단계.

아래와 같은 공유 모달 창이 뜬다.  '퍼가기' 버튼을 클릭한다.

유튜브 동영상 퍼오기 2단계 - 공유 모달창에서 '퍼가기' 버튼을 클릭

 

 

동영상 퍼오기 3단계. 

동영상 퍼가기 창 우측 하단에 있는 '복사' 버튼을 클릭하면 상단에 있는 iframe 소스가 복사된다.
이미지에서 보듯이 iframe 소스상에는 동영상의 너비와 높이가 width="560" height="315"로 특정되어 있다. 

 

유튜브 동영상 퍼오기 3단계 - 동영상 퍼가기 창에서 iframe 소스 '복사' 버튼을 클릭

 

 

퍼온 동영상 iframe 소스를 붙여 넣은 후 - 768*608 사이즈로 브라우저를 줄였을 때의 모습은 아래와 같다.
브라우저를 줄이거나 늘렸을 경우에도 화면에 꽉 차게 동영상을 넣고 싶으니 이제 스크립트를 넣어보기로 하자.

 

퍼온 동영상 iframe 소스를 붙여넣은 후 - 768*608 사이즈로 브라우저를 줄였을 때 모습

 

 

퍼온 유튜브 동영상 반응형으로 만들기

이제 jQeury 소스를 추가할 차례다.
. js 파일 혹은 script 태그에 아래 내용을 추가하면 브라우저의 크기가 리사이징 될 때마다 콘텐츠 화면 폭에 맞게 100%로 동영상 사이즈가 조정된다. 

/* 초기 화면에서 함수 실행 */
  $(document).ready(function() {
    resizeYoutube();
   });

/* 브라우저가 리사이징 될 때 함수 실행 */
  $(window).on('resize', function() {
    resizeYoutube();
  });

function resizeYoutube(){ 
  $("iframe").each(function(){ 
    if( /^https?:\/\/www.youtube.com\/embed\//g.test($(this).attr("src")) ){ 
    	$(this).css("width","100%"); 
    	$(this).css("height",Math.ceil( parseInt($(this).css("width")) * 480 / 854 ) + "px");} 
   }); 
}

 

 

jQuery CDN
위의 소스는 jQuery 문법으로 작성된 것이니 정상적으로 작동하지 않는다면 jQuery CDN을 추가해 줘야 한다. 

jQuery CDN

 

유튜브 동영상 사이즈 반응형으로 조정하는 jQuery 소스 적용 후

 

반응형 jQuery 소스 적용 후 - 768*608 사이즈로 브라우저를 줄였을 때 모습