[Youtube API] player 사이즈 반응형 맞추기

1. wrapper 사이즈 : 100%;
2. ifram 사이즈 : 100%;

document 사이즈 기준 100% 가 되므로, 특정 사이즈를 기준으로 맞추고 싶다면 한번 더 감싸주어야 합니다.

import React, { useEffect, useState } from 'react';
import { useSelector } from 'react-redux';
import styled from 'styled-components';
import Button from '../components/Button';
import ReactPlayer from 'react-player';
 
// import { library } from '@fortawesome/fontawesome-svg-core'
// import { faBars } from '@fortawesome/free-solid-svg-icons'
 
// library.add(faBars);
 
const ContentsBlock = styled.main`
  width: 100%;
  height: 100vh;
`;
 
const Video = styled.div`
  position:relative; 
  height:0;
  width:100%;
  padding-bottom:56.25%; 
`;
const VideoWrap = styled.div`
width: 80vw;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
`;
 
const ButtonBlock = styled.section`
  width: 80vw;
  margin: 1rem auto;
`;
 
const Main = () => {
  const video = useSelector((state) => state.video);
  const videoUrl = `https://www.youtube.com/watch?v=${video.playList}`;
 
  return (
    <ContentsBlock>
      <VideoWrap >
        <Video>
          <ReactPlayer url={videoUrl} playing loop controls width={'100%'} height={'100%'} style={{
            position: 'absolute',
            top: 0,
            left: 0
          }} />
        </Video>
      </VideoWrap>
      <ButtonBlock>
        <Button text="즐겨찾기" />
      </ButtonBlock>
    </ContentsBlock>
  );
};
 
export default Main;

 

 

 

참고링크 : okayoon.tistory.com/entry/css%EB%A7%8C%EC%9C%BC%EB%A1%9C-%EB%B0%98%EC%9D%91%ED%98%95-%EB%B9%84%EB%94%94%EC%98%A4-%EB%A7%8C%EB%93%A4%EA%B8%B0