i want to change the width of the video player when it comes to tablet size

I want to change the width of the video player when it comes to tablet size. I tried like below but it didn't work. help please!

the below code is for video component:

Video.js

 import React from 'react'
    import ReactPlayer from 'react-player'
    import './Video.css'
    
    function Video() {
        return (
        
    <ReactPlayer url='https://www.youtube.com/watch?v=uFREKvAKP_0' autoPlay muted />
        )
    }
    
    export default Video

@media (min-width: 769px) and (max-width:1023px)
{
max-width: 50%;
}

the above code is the CSS for the video component that needs to be smaller when the screen enters the tablet size.

1 answer

  • answered 2020-11-25 12:00 Nikhil Roka

    <ReactPlayer url='https://www.youtube.com/watch?v=uFREKvAKP_0' autoPlay muted className="react__player" />
    
    
    @media ( min-width: 769px ) and ( max-width: 1023px ) {
      .react__player{
         max-width: 50%;
         max-height: 250px; 
         margin-right: 20px;
         
      }
    }