<style>
.videowrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 비율인 경우 */
/* padding-bottom값은 4:3 비율인 경우 75%로 설정합니다 */
padding-top: 25px;
height: 0;
}
.videowrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
<div class="videowrapper">
<iframe width="560" height="315" src="https://www.youtube.com/embed/..."
frameborder="0" allowfullscreen></iframe>
</div>
'[ Web 관련 ] > HTML, CSS' 카테고리의 다른 글
숫자+소수점 만 입력 가능한 폼 (0) | 2021.06.02 |
---|---|
html 웹 페이지 캐싱 하지 않기 (0) | 2021.04.16 |
이미지 위에 객체 올리기 (0) | 2021.02.23 |
CSS 애니메이션 효과(버튼, 배경이미지 등) 만들어 주는 사이트 (0) | 2021.02.04 |
pdf, 프린트 등에서 CSS 배경색이 안나올 때 (0) | 2020.12.21 |