Language/React.js
React Player 반응형 디자인으로 스타일링하기
- -
반응형
Youtube 동영상을 React로 불러올때 iframe으로 불러오는데, 이때 유용하게 사용할 수 있는 라이브러리가 React Player 이다.
다만 스타일링 하지 않으면, 반응형 디자인으로 할때 높이랑 넓이가 비율 대로 잘 맞지 않는다.
구글링 해보니 아래와 같이 작성하면 모바일도 비율에 맞게 잘 표기 된다.
리액트 플레이어 상단 div 를 하나 더 만들어 아래와 같이 스타일링해주니 해결되었다.
(리액트 플레이어는 width, height 인라인으로 100% 지정해줘야 기기에 맞게 지정된다)
출처
반응형
'Language > React.js' 카테고리의 다른 글
| 리액트 (use)Ref 스크롤 이벤트 (0) | 2023.04.23 |
|---|---|
| 리액트로 환율 계산기 만들어보기 (무료 환율 API) (0) | 2023.04.17 |
| 리액트 조건문 (0) | 2022.07.12 |
| checked & defaultChecked (0) | 2022.06.27 |
| 타입스크립트에서 리덕스 디버깅 툴 타입 에러. (0) | 2020.07.22 |
Contents
소중한 공감 감사합니다