[CSS] 액자형식(반응형) 비디오(Youtube) 삽입하기

포트폴리오를 만드는 중 유튜브 동영상을 삽입하려하니 자꾸 반정도만 보이게 잘려나온다던지 조절이 안되게 삽입되는 경우가 자꾸 발생하여 검색 및 복습을 통해 깔끔하게 삽입하는 방법을 정리해 놓는다. 

이는 position의 absoulute속성이 가지고 있는 바로 위의 reletive속성을 가진 부모를 찾아가는 점을 이용한 것으로

먼저 비디오(iframe)에게 position: absolute; top: 0; left: 0; width: 100%; height: 100%;를 준다.

그리고 비디오의 바로 위 부모에게 position: relative; width: 100%; heigth: auto; padding-top: 50%를 주고,

적당히 액자형식의 디자인을 조금 해주면 간단히 완성된다.

 

HTML 샘플코드

<h1>Responsive Video</h1>
<div class="video">
    <div class="video-container">
      <iframe width="100%" height="100%" src="https://www.youtube.com/embed/eitDnP0_83k?controls=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
</div>

CSS 샘플코드

.video {
  width: 100%;
  max-width: 900px;
  margin: 30px auto;
  border-radius: 30px;
  background-color: #f0f0f0;
  padding: 40px;
  box-sizing: border-box;
  box-shadow: 0px 8px 33px #999;
}
 
.video-container {
  position: relative;
  width: 100%;
  height: auto;
  padding-top: 50%;
}
 
iframe {
  z-index: 1;
  top: 0;
  left: 0;
  position: absolute;
  width: 100%;
  height: 100%;
}