[#. react-ratio] React에서 video, image 비디오, 이미지 항상 같은 비율로 width, height 사이즈 유지하기

 

 

 

 

 

youtube clone 코딩을 하면서 모바일 기기로 직접 찍어서 업로드한 동영상이 detail 페이지에 떴을 때

video에 width = 100% 을 줬더니 height은 통제가 안 된다

모바일 기기 세로로 촬영해서 그렇다

video width = 100%로 유지하고 height은 비율을 유지하면서 반응형으로 바뀌었으면 좋겠다

 

 

www.npmjs.com/package/react-ratio

react-ratio

 

쉽게 사용 가능한 package가 있다

 

 

 

① 설치

npm install --save react-ratio

 

 

② React에서 사용

import React, { Component } from 'react';
import styled from 'styled-components';
import Ratio from 'react-ratio';

const DetailTemplate = styled.div`
  video {
    width: 100%;
    height: 100%;
  }
`;

function VideoDetail() {

   return (
      <DetailTemplate>
         <Ratio ratio={ 16 / 9 }>
            <video src={`http://localhost:5000/${VideoDetail.filePath}`} controls />
         </Ratio>
      </DetailTemplate>

   )
}

 

 

 

 

 

 

 

동영상을 항상 16 / 9 비율로 유지한다