Fullscreen includes custom controls

Author: mderrick

demo/src/components/App.css

@@ -16,15 +16,11 @@
     color: #2492a8;
 }
 
-.video {
-    width: 634px;
-    height: 356px;
-    margin: 0 auto;
-}
-
-
 .videoListItem {
     background-color: #efefef;
     padding: 20px;
     margin-bottom: 20px;
+    max-width: 634px;
+    max-height: 356px;
+    margin: 0 auto;
 }

demo/src/components/App.js

@@ -30,7 +30,6 @@ class App extends Component {
                             onPlay={() => {
                                 this.refs.video2.videoEl.pause();
                             }}
-                            className={styles.video}
                             poster={sintelTrailerPoster}>
                             <source src={sintelTrailer} type="video/mp4" />
                             <track
@@ -53,7 +52,6 @@ class App extends Component {
                                 this.refs.video1.videoEl.pause();
                             }}
                             src={bigBuckBunny}
-                            className={styles.video}
                             poster={bigBuckBunnyPoster}>
                         </Video>
                     </li>

src/DefaultPlayer/DefaultPlayer.js

@@ -123,7 +123,7 @@ export default videoConnect(
         }
     }),
     (videoEl, state) => ({
-        onFullscreenClick: () => fullscreen(videoEl),
+        onFullscreenClick: () => fullscreen(videoEl.parentElement),
         onVolumeClick: () => toggleMute(videoEl, state),
         onCaptionsClick: () => toggleTracks(state),
         onPlayPauseClick: () => togglePause(videoEl, state),