Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 | 31 |
Tags
- CSS
- hooks
- gh-pages
- AWS
- react
- Next.js
- 클린코드
- createRoot
- .eslintrc
- s3
- react18
- naver api
- package.json
- Web Storage
- bucket
- fly.io
- dependabot
- aws-sdk
- GitHub
- npm-check-updates
- 반응형
- dependencies
- heroku
- 배포
- multer-s3
- node.js
- touch event
- Github Pages
- qoddi
- php
Archives
- Today
- Total
목록YouTube (1)
Ann's log
[CSS] 웹페이지에 반응형 YouTube 동영상 삽입하기
이 글에서 정리하는 내용: 웹페이지에 YouTube 동영상을 삽입하는 방법 동영상의 비율은 유지 하면서 크기를 반응형으로 조절하는 방법 웹페이지에 YouTube 동영상 삽입하기 YouTube 동영상 아래의 공유 버튼을 클릭한다. 퍼가기 버튼 클릭. 그러면 동영상 퍼가기 창이 뜨는데, 원하는 조건을 선택한 다음에 복사 버튼을 클릭하면 태그 전체가 복사 된다. 이제 복사된 태그를 HTML 문서 안의 원하는 곳에 붙여넣기 하면 YouTube 동영상 삽입 완료! HTML 나는 CSS를 이용하여 반응형으로 만들기 위해 div로 iframe 태그를 감싸주고 player 라는 class 이름을 붙여줬다. 동영상의 비율은 유지 하면서 크기를 반응형으로 조절하기 비율이 유지되는 반응형 동영상을 위해서는 동영상의 종횡비를..
CSS
2022. 4. 2. 15:47