[ jQuery / CSS ] 제이쿼리와 CSS를 이용한 반응형 유튜브 플레이어

WebProgram/Tistory

[ jQuery / CSS ] 제이쿼리와 CSS를 이용한 반응형 유튜브 플레이어

Total Fix! 2016. 5. 16. 10:48

블로그를 손보다 반응형에 맞추어 동영상 플레이어도 크기를 조절하는 방법을 찾다 생각한 방법입니다.

기존 CSS 방식의 문제점

널리 알려진 CSS만을 이용한 동영상 플레이어를 반응형으로 만들거나 Bootstrap의 Responsive embed를 이용할 때에는 동영상의 원래의 크기와 상관없이 가로길이가 100%에 맞춰지게 됩니다.

이는 본문 크기보다 큰 동영상의 경우는 관계없지만, 본문보다 작은 동영상의 경우 오히려 보기가 불편해집니다.

여기서 소개하는 방법은 동영상보다 본문의 크기가 클 때는 동영상의 사이즈로 크기가 조절되고 동영상보다 본문이 작아지면 본문의 100% 맞춰지는 방법입니다.

그리고 동영상의 비율도 함께 조절됩니다.

이제부터 적용하는 방법에 대하여 설명하겠습니다.

먼저 동영상의 원래 크기부터 알아야겠죠?

유튜브의 경우 유튜브를 조금 플레이하다 일시 정지 후 마우스를 올리고 우측 키를 눌러 동영상 통계를 클릭합니다.

그럼 동영상의 정보가 나오는데 "Dimensions"는 현재 플레이어의 크기를 나타내고 "Resolution"은 실제 동영상의 크기를 나타냅니다.

필요한 것은 "Resolution" 값입니다.

이제 유튜브를 삽입하는 HTML을 작성합니다.

유튜브의 소스코드 복사를 하시면 다음과 같은 iframe으로 구성되어 있습니다.

유튜브의 간단한 옵션

modestbranding=1 : YouTube 로고를 없앤다.

rel=0 : 플레이 완료 후 추천 영상을 출력하지 않는다.

이제 위의 유튜브 소스코드를 다음의 HTML로 감쌉니다.

완성된 소스코드는 다음과 같습니다.

위의 동영상 소스를 HTML 편집기를 이용하여 글에 삽입할 위치에 붙여넣습니다.

다음은 CSS를 편집해야 합니다.

CSS에 다음의 CSS를 추가합니다.

.auto-resizable-iframe {
	margin: 0px auto;
}
.auto-resizable-iframe > div {
	position: relative;
	height: 0px;
}
.auto-resizable-iframe iframe {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}

이제 아래의 jQuery를 추가합니다.

(jQuery의 사용방법 및 코드에 대한 설명은 하지 않겠습니다.)

var video_file = $("iframe[src*='//www.youtube.com']");
video_file.each(function() {
	$(this).parent().parent().css('max-width', $(this).attr('width') + 'px');
	$(this).parent().css('padding-bottom', $(this).attr('height')/$(this).attr('width')*100 + '%');
	$(this).removeAttr("width").removeAttr("height");
});

이제 완성되었습니다.

CSS와 jQuery는 한 번만 추가하시면 계속해서 사용할 수 있습니다.

티스토리