<h1>일정 비율 유지 박스</h1>

<h2>1:1 ratio %</h2>
<div class="square"></div>

<hr>

<h2>thumb list</h2>
<ul class="lst-thumb">
  <li>
    <img src="https://images.unsplash.com/photo-1596854407944-bf87f6fdd49e?q=80&w=3432&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
  </li>
  <li>
    <img src="https://images.unsplash.com/photo-1596854407944-bf87f6fdd49e?q=80&w=3432&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
  </li>
</ul>

<h2>responsive youtube player</h2>

<div class="youtube-wrap">
  <iframe class="player" width="560" height="315" src="https://www.youtube.com/embed/D1PvIWdJ8xo" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>




/* 1:1 ratio */
.square {
  width: 50%;
  background: blue;
  &::before {
    content: '';
    display: block;
    width: 100%;
    height: 0;
    padding-top: 100%;
  }
}

// thumb list
.lst-thumb {
  display: flex;
  gap: 20px;
  list-style-type: none;
  margin: 0;
  padding: 0;
  li {
    position: relative;
    width: 50%;
    background: blue;
    &::before {
      content: '';
      display: block;
      width: 100%;
      height: 0;
      padding-top: 100%;
    }
    &::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      border-radius: inherit;
      border: 1px solid rgba(0,0,0, 0.06);
      background: rgba(0,0,0, 0.03);
    }
    img {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      
    }
  }
}

/* responsive youtube player */
.youtube-wrap {
  position: relative;
  width: 100%;
  // 16 : 9 = 100% : 56.25%
  padding-bottom: 56.25%;
  .player {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #000;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.