fixed width & height of video when it is in fullscreen mode

cookpete · Feb 12, 2017 · f966a15 · f966a15
1 parent a6191cf
commit f966a15
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 23 deletions.
diff --git a/src/demo/App.js b/src/demo/App.js
@@ -93,29 +93,31 @@ export default class App extends Component {
       <div className='app'>
         <section className='section'>
           <h1>ReactPlayer Demo</h1>
-          <ReactPlayer
-            ref={player => { this.player = player }}
-            className='react-player'
-            width={480}
-            height={270}
-            url={url}
-            playing={playing}
-            playbackRate={playbackRate}
-            volume={volume}
-            soundcloudConfig={soundcloudConfig}
-            vimeoConfig={vimeoConfig}
-            youtubeConfig={youtubeConfig}
-            fileConfig={fileConfig}
-            onReady={() => console.log('onReady')}
-            onStart={() => console.log('onStart')}
-            onPlay={() => this.setState({ playing: true })}
-            onPause={() => this.setState({ playing: false })}
-            onBuffer={() => console.log('onBuffer')}
-            onEnded={() => this.setState({ playing: false })}
-            onError={e => console.log('onError', e)}
-            onProgress={this.onProgress}
-            onDuration={duration => this.setState({ duration })}
-          />
+          <div className='video-player'>
+            <ReactPlayer
+              ref={player => { this.player = player }}
+              className='react-player'
+              width={'100%'}
+              height={'100%'}
+              url={url}
+              playing={playing}
+              playbackRate={playbackRate}
+              volume={volume}
+              soundcloudConfig={soundcloudConfig}
+              vimeoConfig={vimeoConfig}
+              youtubeConfig={youtubeConfig}
+              fileConfig={fileConfig}
+              onReady={() => console.log('onReady')}
+              onStart={() => console.log('onStart')}
+              onPlay={() => this.setState({ playing: true })}
+              onPause={() => this.setState({ playing: false })}
+              onBuffer={() => console.log('onBuffer')}
+              onEnded={() => this.setState({ playing: false })}
+              onError={e => console.log('onError', e)}
+              onProgress={this.onProgress}
+              onDuration={duration => this.setState({ duration })}
+            />
+          </div>
 
           <table><tbody>
             <tr>

diff --git a/src/demo/App.scss b/src/demo/App.scss
@@ -22,6 +22,11 @@ $gutter-width: 10px;
   vertical-align: top;
 }
 
+.video-player {
+  width: 480px;
+  height: 270px
+}
+
 .react-player {
   margin-bottom: 10px;
   background: rgba($black, .1);