Made use of React.lazy and Suspense

.babelrc

@@ -1,4 +1,4 @@
 {
   "presets": ["env", "react"],
-  "plugins": ["transform-class-properties", "transform-object-rest-spread"]
+  "plugins": ["transform-class-properties", "transform-object-rest-spread", "syntax-dynamic-import"]
 }

package.json

@@ -4,8 +4,9 @@
   "author": "Sara Vieira",
   "main": "dist/index.js",
   "dependencies": {
-    "react": "^16.4.0",
-    "react-dom": "^16.4.0",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
+    "react-scripts": "1.1.1",
     "react-youtube": "^7.6.0",
     "remcalc": "^1.0.10",
     "styled-is": "^1.1.3"
@@ -27,8 +28,8 @@
   },
   "peerDependencies": {
     "prop-types": "^15.6.1",
-    "react": "^16.4.0",
-    "react-dom": "^16.4.0",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
     "react-scripts": "1.1.1",
     "styled-components": "^3.3.2"
   },

src/Components/Player.js

@@ -1,9 +1,8 @@
-import React, { Component } from "react"
+import React, { Component, Suspense, lazy } from "react"
 import styled from "styled-components"
-import YouTube from "react-youtube"
 import is, { isNot } from "styled-is"
-import remcalc from "remcalc"
 import PropTypes from "prop-types"
+const YouTube = lazy(() => import('./Youtube'));
 
 import Play from "./Play"
 
@@ -31,20 +30,6 @@ const VideoWrapper = styled.section`
   `};
 `
 
-const Iframe = styled(YouTube)`
-  position: relative;
-  z-index: 3;
-  border: none;
-  transition: all 200ms ease;
-  height: 100%;
-  ${is("cinemaMode")`
-    height: ${remcalc(600)};
-    @media (max-width: ${remcalc(768)}) {
-      height: auto;
-    }
-  `};
-`
-
 const Thumbnail = styled.img`
   display: block;
   width: 100%;
@@ -101,9 +86,10 @@ class Player extends Component {
       <VideoWrapper {...props} style={styles}>
         <Video>
           {showVideo ? (
-            <Iframe
+          <Suspense fallback={<div>Loading...</div>}>
+            <YouTube
               videoId={id}
-              id={`a-${id} do-not-delete-this-hack`}
+              id={`${id}`}
               onReady={e => e.target.playVideo()}
               onPlay={onPlay}
               onPause={onPause}
@@ -120,6 +106,7 @@ class Player extends Component {
                 ...playerVars
               }}
             />
+          </Suspense>
           ) : (
             <Image>
               <Play onClick={this.showVideo} aria-label="Play Video" />

src/Components/Youtube.js

@@ -0,0 +1,91 @@
+import React, { Component } from "react"
+import styled from "styled-components";
+import is from "styled-is";
+import remcalc from "remcalc";
+import ReactYouTube from "react-youtube"
+import PropTypes from "prop-types"
+
+const Iframe = styled(ReactYouTube)`
+                position: relative;
+                z-index: 3;
+                border: none;
+                transition: all 200ms ease;
+                height: 100%;
+                ${is("cinemaMode")`
+                  height: ${remcalc(600)};
+                  @media (max-width: ${remcalc(768)}) {
+                    height: auto;
+                  }
+                `};
+              `;
+
+class YouTube extends Component {
+
+    render () {
+
+        const {
+            id,
+            onPlay,
+            onPause,
+            onEnd,
+            onError,
+            onStateChange,
+            onPlaybackRateChange,
+            onPlaybackQualityChange,
+            playerVars,
+            noCookies,
+            ...props
+        } = this.props
+
+        return (
+            <Iframe
+                videoId={id}
+                id={id}
+                onReady={e => e.target.playVideo()}
+                onPlay={onPlay}
+                onPause={onPause}
+                onEnd={onEnd}
+                onError={onError}
+                onStateChange={onStateChange}
+                onPlaybackRateChange={onPlaybackRateChange}
+                onPlaybackQualityChange={onPlaybackQualityChange}
+                opts={{
+                    width: "100%",
+                    host: noCookies
+                        ? "https://www.youtube-nocookie.com"
+                        : "https://www.youtube.com",
+                    ...playerVars
+                }}
+            />
+        )
+
+    }
+}
+
+export default YouTube
+
+YouTube.propTypes = {
+    /** ID of the youtube video to play . */
+    id: PropTypes.string.isRequired,
+    /** .function to run when the video starts Playing */
+    onPlay: PropTypes.func,
+    /** .Function that runs when the video is paused */
+    onPause: PropTypes.func,
+    /** . Functinn that runs on the end of the video */
+    onEnd: PropTypes.func,
+    /** .Function that runs when the video encounters an error */
+    onError: PropTypes.func,
+    /** .Function that runs when the video changes state like from playing to paused */
+    onStateChange: PropTypes.func,
+    /** .Function that runs when the video encounters changes playback rater */
+    onPlaybackRateChange: PropTypes.func,
+    /** .Function that runs when the video changes quality */
+    onPlaybackQualityChange: PropTypes.func,
+    /** https://developers.google.com/youtube/player_parameters */
+    playerVars: PropTypes.object,
+    /** .Styles to apply over the wrappr */
+    styles: PropTypes.object,
+    /** .if set to true will change the host to  "https://www.youtube-nocookie.com" */
+    noCookies: PropTypes.bool,
+    /** .Size of the thumbnail we get from youtube */
+};