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;
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!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With