반응형으로 비디오(유튜브) 삽입하기

See the Pen Responsive Video by NY KIM (@nykim_) on CodePen.

 

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

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

 

<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>

.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%;
}