Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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;
like image 355
Stévillis Avatar asked Oct 16 '22 16:10

Stévillis


1 Answers

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!

like image 87
Stévillis Avatar answered Oct 20 '22 22:10

Stévillis