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

320x100

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

728x90

저작자표시

'Study > CSS' 카테고리의 다른 글

[CSS 방법론] BEM 방식  (20)	2020.05.17
[CSS] CSS Grid (그리드) 배우기  (2)	2020.01.29
반응형으로 비디오(유튜브) 삽입하기  (9)	2019.10.31
[CSS 3D] 인터랙티브 웹 효과 구현하기 (2)  (2)	2019.08.12
[CSS 3D] 인터랙티브 웹 효과 구현하기 (1)  (3)	2019.08.05
[SASS] node-sass 사용하기  (0)	2019.08.01