HTML
<div class="iframe_wrap">
<iframe src="https://www.youtube.com/embed/PH5mI1VGqQo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
CSS
.iframe_wrap{
position: relative;
height: 0;
overflow: hidden;
max-width: 100%;
padding-bottom: 56.25%;
/*
56.25% => 16:9 비율의 영상
75% => 4:3 비율의 영상
*/
}
.iframe_wrap iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
반응형
'웹 개발 > HTML & CSS' 카테고리의 다른 글
[css] 마우스로 드래그했을 때 배경색, 글씨색 바꾸기 (0) | 2023.04.07 |
---|---|
svg animation - svg로 선 그어지는 효과 (0) | 2023.04.07 |
[CSS] hover 효과 (0) | 2022.12.19 |
[CSS] reset.css (0) | 2022.09.13 |
[HTML&CSS] 레이아웃 마크업과 스타일을 모아둔 사이트 (0) | 2022.09.08 |
댓글