일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 |
- last-modified
- commonjs와 ecmascript modules(esm)
- d3 지도
- repaint
- Learning React
- vue composable 함수
- usefetch
- 다자 이해관계자 모델
- nuxt universal rendering
- ecmascript modules(esm)
- 참조형 props의 default
- d3 지도 확대/축소
- d3 지도 툴팁
- cloud firestore id auto increment
- $fetch
- component is already mounted please use $fetch instead.
- firebase id 자동
- ToDo
- git
- vue 컴포저블 함수
- 화살표 함수 중괄호
- 화살표 함수 {}
- vuedraggable
- d3 지도 타입스크립트
- 함수형 프로그래밍
- 인터넷 거버넌스
- vue3 drag and drop
- vue draggable 차트 안나옴
- 참조형 default
- reflow
- Today
- Total
빵 입니다.
유튜브 동영상 추가하기(feat. iframe) 본문
우리는 이미지를 화면 사이즈의 변함에 따라 꽉 차게 작업할 때
img {width: 100%; height: auto;} 혹은 img {max-width: 100%; height: auto;}를 사용한다.
그렇다면 동영상에도 그렇게 적용할 수 있을까?
정답은 NNNNN
동영상, 특히 유튜브를 퍼온다면 <iframe>을 사용하게 되는데 이미지처럼 height: auto가 적용되지 않는다.
유튜브 동영상을 화면 사이가 변함에 따라 & 비율에 맞게 적용하려면?
조건1. 화면 사이즈가 반응형되더라도 비율에 맞추어 항상 꽉찬 화면 제공한다.
조건2. 유튜브가 제공하는 16:9 비율에 맞추되 상하에 검정 여백 없이 삽입한다.
문제점 분석
<iframe>에 넓이를 주든 높이를 주든 고정된 값이다.
화면이 커지면 검정 여백이 생기고, 작아지면 영상이 잘린다.
넓이, 높이가 유동적이어야만 화면에 항상 꽉 차게 들어간다.
--- 유튜브 <iframe> 퍼오는 방법 ---



스크립트로 작업하고 싶지 않다.
CSS 만으로 해결하려면... 어찌 보면 미봉책인 해결 방법만 있다.
해결 방법은?
화면 사이즈가 변함에 따라 부모 요소를 16:9 화면으로 고정시킨다.
=> 고정시키는 방법은 높이를 0을 주어 빈 박스로 만들고, 높이 대신 padding-bottom을 비율에 맞게 %로 주어 유동적이게 만든다.
자식 요소인 <iframe>요소를 부모 요소에 꽉 차게 보여준다.

div {
position: relative;
height: 0;
padding-bottom: 56.25%;
}
div iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
* position을 추가하는 이유는 부모 요소의 높이가 0이기 때문에 자식 요소 iframe을 인식하지 못한다.
iframe을 absolute로 띄워 부모로부터 자식임을 인지하게 만들고, iframe에게 기준값이 되는 부모를 알려준다.
- 화면크기가 변하더라도 검정 여백이 발생하지 않고 꽉 차게 보인다.
- 9:16화면이라면 padding-bottom: 177.777%;을 적용한다.
'스타디 > CSS, SCSS' 카테고리의 다른 글
SCSS에서 rgb값 사용하기 (0) | 2022.09.27 |
---|---|
[2/2] @import 대신 @use 사용하자. sass-migrator를 사용해보자. (0) | 2022.09.14 |
CSS Variable Syntax (0) | 2022.08.30 |
Dart Sass 의 calc() 내에서 / 삭제될 예정 (0) | 2022.08.30 |
font-size em vs rem (0) | 2022.08.22 |