Search code examples
reactjsvideo-reactjs

React - How to resize a video-react Player?


I read the docs (https://video-react.js.org/components/player/) and tried to change width and height of a video, but it didn't work. I also found the same problem here: video-react attribute width and height is not working

How can I rezise the video even setting fluid as false and it doesn't working?

My code:

import React, { Component } from 'react';
import './App.css';
import { Player } from 'video-react';

class App extends Component {
  render() {
    return (
      <Player
        playsInline
        poster="/assets/poster.png"
        src="https://media.w3.org/2010/05/sintel/trailer_hd.mp4"
        fluid={false}
        width={100}
        height={50}
      />
    );
  }
}

export default App;

Solution

  • It was just a missing of attention, because the Video-React Docs (https://video-react.js.org) explains that we must import the .css file to change the layout of our Video Component.

    What I did was just import the .css file and resize the video:

    import React, { Component } from 'react';
    import "../node_modules/video-react/dist/video-react.css";
    import './App.css';
    import { Player } from 'video-react';
    
    class App extends Component {
      render() {
        return (
          <Player
            playsInline
            poster="/assets/poster.png"
            src="https://media.w3.org/2010/05/sintel/trailer_hd.mp4"
            fluid={false}
            width={480}
            height={272}
          />
        );
      }
    }
    
    export default App;
    



    Just another tip: If you are using sccs file, you must import the sccs video file (@import "~video-react/styles/scss/video-react";) at the top of your sccs file, otherwise your own classes definitions can overwrite the original scss video-react classes, as happend to me. It's also important to make a empty class for your component, like this:
    App.js:

    <div className="column blah">
        <Player />
    </div>
    

    And in your sccs file: .scss

    @import "~video-react/styles/scss/video-react";
    
    .example-classe {
     margin-top: 4px;
    }
    
    .blah {
    }
    


    It worked for me. I hope it helps you too!