유튜브 영상을 iframe 으로 가져갈때 높이가 가로가 자동으로 조절되도록하는 CSS 코드와 태그

일반적으로 유튜브에서 유튜브 영상을 퍼가기 하면 자동으로 가로와 높이가 조절이 않됩니다.

가로를 100%으로 CSS 를 적용해도 세로 사이즈 조절이 않되는 문제가 있습니다.

그래서 세로 사이즈를 jQuery 나 오리지널 자바스크립트 등을 사용해서 높이를 계산해서 하는 경우가 있는데요.

이러한 경우에도 문제가 있습니다. 스크립트가 실행될때 가로나 높이 계산이 잘 않되는 경우가 있기 때문입니다.

물론 드물게 일어나는 현상이지만 완벽하다고 보기는 어렵습니다.

 

그러나 아래의 코드로 하면 반응형으로 유뷰트 영상이 비율이 잘 유지되어 나타납니다.

저처럼 유튜브 영상 높이 조절문제 해결방법을 찾으시던 분들에게 도움이 되셨으면 좋겠습니다.

 

 

CSS코드

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

 

HTML 코드

<div class="video-container">
	<iframe width="560" height="315" src="https://www.youtube.com/embed/영상코드" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

iframe 의 src 에 유튜브 링크 주소를 넣어주세요.

 

이제 유튜브 영상도 반응형으로 보여줄 수 있습니다.

조그만 도움이 이라도 되셨으면 좋겠습니다.