6

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;
Stévillis
  • 491
  • 1
  • 6
  • 16

2 Answers2

6

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!

Stévillis
  • 491
  • 1
  • 6
  • 16
-1

When faced with a similar problem, I set the height and width to 100%, and then place the inside a which had a height and width set. Try this:

<div style="height:50px; width:100px">
  <Player
    playsInline
    poster="/assets/poster.png"
    src="https://media.w3.org/2010/05/sintel/trailer_hd.mp4"
    fluid={false}
    width={100%}
    height={100%}
  />
</div>
chadhamre
  • 607
  • 7
  • 12