[CSS] 유튜브 영상 가로 100% 설정/ youtube video width 100%

youtube의 영상 링크를 가지고 와서 사용할 때

height의 비율과 맞게 width 100%로 지정하는 법

 

/* HTML */

<div class="video-container">
  <iframe
    width="560"
    height="315"
    src=""
    title="YouTube video player"
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen
  ></iframe>
</div>

/* CSS */

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