유튜브(Youtube) 영상 비율에 맞게 (반응형 사이즈)로 가져오기

유튜브(Youtube) 영상 비율에 맞게 (반응형 사이즈)로 가져오기

(YouTube videos in responsive size)

---

웹페이지 또는 개인 블로그 내에 Youtube영상을 삽입해야하는 경우가 있다. Youtube에서는 자체적으로 동영상을 공유하는 기능을 제공하고 있다.

Youtube 동영상을 바로 내 페이지에 삽입할 수 있는 코드를 제공한다.

유튜브에서 제공하는 코드를 내 페이지에 붙여넣으면 iframe을 통해 내 페이지에서 유튜브 영상을 바로 볼 수 있다. 코드에 대해 잘 모르는 사람들에게는 정말 편리한 서비스를 제공한다고 볼 수 있다.

---

하지만 한가지 아쉬운점이 있다. 바로 iframe으로 태그 자체로 공유기능을 제공하다보니 최적화된 사이즈로 제공이 어렵고 특히 반응형웹에는 취약할 수 밖에 없다.

브라우저 리사이즈 시 높이가 고정이 되어 문제가 발생된다.

위 이미지를 보면 우선 작은 사이즈로 갈 경우에 높이가 고정이다보니 동영상 외 검은색영역이 불필요하게 존재하여 불편하고 큰 사이즈로 갈 경우에는 동영상 비율이 커지면서 동영상의 위 아래가 짤리는 현상이 발생된다. 그럼 어떻게 해야 이 두가지 문제를 해결할 수 있을까?

---

첫번재 방법으로 자바스크립트를 활용하여 매 리사이즈 시 마다 동영상 비율에 맞게 iframe의 높이를 지정(setting) 해주는 방법이 있다. 아래 코드로 확인해보자.

//Javascript
//최초 로드 시 iframe 높이값 비율에 맞게 세팅
var $videoIframe = document.getElementById('video');
var responsiveHeight = $videoIframe.offsetWidth * 0.5625;
$videoIframe.setAttribute('height', responsiveHeight);

//브라우저 리사이즈 시 iframe 높이값 비율에 맞게 세팅
window.addEventListener('resize', function(){
    responsiveHeight = $videoIframe.offsetWidth * 0.5625;
    $videoIframe.setAttribute('height', responsiveHeight);
});

Javascript로 Youtube영상의 높이를 세팅한다.

Javascript로 동영상의 너비에 맞는 비율을 계속 계산하여 높이를 세팅해주고 있기 때문에 아무문제없이 반응형에서도 서비스가 가능하다.

---

두번째 방법은 Javascript없이 CSS만으로도 가능하다. 이전에 다른 포스팅에서 설명했던 반응형 박스만들기와 같은 원리이다. 아래 글도 유용하니 읽어보면 좋다.

 

2019/08/28 - [CSS] - CSS 반응형 작업 시 박스 비율 유지하기

CSS 반응형 작업 시 박스 비율 유지하기

유튜브에서 제공해준 iframe코드를 아래와 같이 div태그로 한번 감싸준 후 CSS코드를 작성한다.

<!-- HTML -->
<div class="video-wrap">
    <iframe id="video" width="100%" height="315" src="https://www.youtube.com/embed/l9OFVBkhBVY" frameborder="0" allow="encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

.video-wrap {position:relative; padding-bottom:56.25%; padding-top:30px; height:0; overflow:hidden;}
.video-wrap iframe,
.video-wrap object,
.video-wrap embed {position:absolute; top:0; left:0; width:100%; height:100%;}

위와 같이 작성 후 브라우저에서 확인해보면 Javascript때와 100% 동일하게 문제 없이 리사이즈가 된다.

 

CSS만으로 Youtube영상의 반응형 사이즈 구현이 가능했다.

작동 원리는 iframe을 감싸고 있는 div에 높이를 지정하는 것이 아닌 width값에 따라 유동적으로 변경되도록 padding-top값을 퍼센트로(56.25%) 주고, div 내부에 있는 iframe이 padding-top값에 밀려나지 않도록 position:absolute값을 주었다. 

(매번 느끼는 것이지만 text로 코드를 설명하긴 정말 어렵다. 그 능력을 기르기 위해 블로그를 열심히 하고 있다.)

 

기술참조 : https://coolestguidesontheplanet.com/videodrome/youtube/

---

2020/02/03 - [분류 전체보기] - 역동적인 이미지 로드 (현대차 N Brand) UI Clone

역동적인 이미지 로드 (현대차 N Brand) UI Clone

2019/09/04 - [JavaScript] - 무한스크롤 (Infinity Scroll) UI 구현하기

무한스크롤 (Infinity Scroll) UI 구현하기

2019/08/28 - [업무 도움되는] - 작업 샘플(임시) 이미지 자동 생성 placeholder.com / picsum.photos

작업 샘플(임시) 이미지 자동 생성 placeholder.com / picsum.photos