동영상은... 비교적 덜 간단
이미지를 가변 이미지로 처리해주었던 것과 동일한 처리를,
동영상에도 똑같이 적용할 수 있다.
그러나 문제는, 동영상 서비스에 따라 그 성질이 조금씩 다를 수 있다는 것!
<iframe width="560" height="315" src="https://www.youtube.com/embed/BYMM5Dh_tSY?si=KL5EGFg35cGH2SXW" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
단순히 사이즈만 변경해서는, 프레임의 크기는 변화하지만
실제 콘텐츠(동영상)의 크기는 변하지 않는다.
해결방법
- 여백을 만들고, 그 여백에 절대값을 준다.
: 이때 여백의 크기는 "종횡비(height/width)"에 달려있다!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>가변 동영상</title>
<style>
.player{
padding-top: 56.25%;
position: relative;
}
iframe{
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="player">
<iframe width="560" height="315" src="https://www.youtube.com/embed/BYMM5Dh_tSY?si=KL5EGFg35cGH2SXW" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
</body>
</html>
'Web > HTML+CSS+JS' 카테고리의 다른 글
| 반응형 웹 기초: 가변 이미지 (0) | 2023.12.24 |
|---|---|
| 반응형 웹 기초: 미디어쿼리 (0) | 2023.12.24 |
| 반응형 웹 기초: CSS 함수 개념과 calc() (0) | 2023.12.24 |
| 반응형 웹 기초: 가변 레이아웃 (가변 그리드) (0) | 2023.12.24 |
| 반응형 웹 기초: 뷰포트 단위 vw vh vmin vmax (0) | 2023.12.24 |