-
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'Blog > CSS' 카테고리의 다른 글
[CSS 방법론] BEM 방식 (27) 2020.05.17 [CSS] CSS Grid (그리드) 배우기 (9) 2020.01.29 [CSS 3D] 인터랙티브 웹 효과 구현하기 (2) (2) 2019.08.12 [CSS 3D] 인터랙티브 웹 효과 구현하기 (1) (5) 2019.08.05 [SASS] node-sass 사용하기 (0) 2019.08.01 댓글