유튜브 비디오 태그(iframe) css만으로 반응형 비디오 만들기
*예시에 사용한 비디오는 유튜브 장삐쭈님 것을 가져다가 사용하였습니다. css만으로 반응형 비디오 만들기 동적인 값을 구할 때, 보통 js를 많이들 사용합니다. 하지만, 효율적인 이유로 css로 가능한 부분은 js로 컨트롤 하지 않죠. javascript를 사용하지 않고 css만으로 유튜브에서 가져온 비디오를 반응형으로 만들어보도록 하겠습니다. 먼저 내가 반응형으로 작업하려는 비디오의 비율을 알아야합니다. 보통 데스크탑에서의 비디오 비율은 16:9 이지만, 아닌 경우도 있으므로 비율을 알고 계산을 진행하도록 합니다. 16:9 비율의 해상도 표 2160p 3840x2160 1440p 2560x1440 1080p 1920x1080 720p 1280x720 480p 1280x720 360p 640x360 24..
HTML
2019. 6. 26. 10:27
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- 메서드
- css
- VUE
- frontend
- 제이쿼리
- JS
- Article
- 아티클
- 기초
- Study
- 공부
- TypeScript
- 제로초
- jQuery
- 코딩애플
- 강의
- 프로젝트
- 차이
- Method
- 자바스크립트
- 타입스크립트
- 뷰
- 통신
- html
- JavaScript
- 브라우저
- 리액트
- React
- 프론트엔드
- vue.js
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 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 |
글 보관함