반응형
유튜브 영상을 첨부하려고 하는데 반응형으로 영상 프레임 크기가 늘어났다, 줄어들었다 했으면 좋겠다
js를 쓰지 않고 css만 이용해서 설정해보자
html
<div class="video-list">
<ul>
<li>
<iframe src="https://www.youtube.com/embed/" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<span class="tit">iframe width, height 비율 설정하기(with shab)</span>
</li>
</ul>
</div>
css
.video-list ul li {
position: relative;
padding-bottom: 55%;
overflow: hidden;
}
.video-list ul li iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
기기 혹은 웹에 따라 자동으로 크기가 비율로 조절된다
반응형
'CSS' 카테고리의 다른 글
[#. CSS] css gradient 그라데이션 색상 코드 제공해주는 사이트 (0) | 2021.01.12 |
---|---|
[#. CSS] 이미지 위에 텍스트, 글자 올리기 text on image (1) | 2020.12.24 |
[#. CSS] 반응형 웹 모바일, 태블릿 디바이스별 CSS 적용하기 미디어 쿼리 media query (0) | 2020.10.27 |
[#CSS] Swiper 슬라이드 생성하기, 이미지 슬라이드, 유튜브 슬라이드 (0) | 2020.09.17 |
[CSS] Grid Layout, 그리드 레이아웃 사용하기 (0) | 2020.07.30 |