[script] 유튜브 반응형 높이 정의

요즘 사이트에 역동적인 효과를 위해 동영상 유튜브를 많이 사용한다.

모바일 디바이스를 위해 유튜브 높이를 조절해줘야한다.

유튜브 영역에 name을 videoHeight 정의한후 아래의 스크립트를 해당영역 뒤에 추가해주면 된다.

디바이스별로 삽입한 유튜브의 높이를 상황에 맞춰 조절하는 스크립트.

 

html

<style>
.yt-frame {
	width: 92%;
	margin: 0 auto;
}

.yt-frame iframe {
	width: 100%;
	height: 100%;
}
</style>

<div class="yt-frame" name="ytFrame">
	<iframe src="videoUrl" title="YouTube video player" frameborder="0"
	allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
	allowfullscreen></iframe>
</div>

 

javascript

$(window).resize(function () {
  updateYtboxHeight();
})
updateYtboxHeight();
function updateYtboxHeight() {
  $('[name="ytFrame"]').each(function (index, val) {
    let wid = $(val).outerWidth();
    console.log('w',wid);
    let hei = parseInt(wid / 16 * 9);
    console.log('h',$(val).outerHeight());
    $(val).outerHeight(hei);
    console.log('after w',wid)
  })
}

 

유튜브영역을 어떻게 코드에 추가하는걸까 하는 의문이 생길수 있는데 다음 포스팅때 설명하겠다.