Add extension video component to wedo and ev3 pages

src/components/extension-landing/extension-landing.scss

@@ -117,8 +117,8 @@
 
             .video-player {
                 height: 180px;
-                border: 2px solid $ui-border;
-                border-radius: 10px;
+                border: 0.25rem solid $ui-white-15percent;
+                border-radius: 0.75rem;
                 overflow: hidden;
             }
         }

src/components/extension-landing/extension-video.jsx

+const PropTypes = require('prop-types');
+const React = require('react');
+
+require('./extension-landing.scss');
+
+const ExtensionVideo = props => (
+    <div className="video-player">
+        <iframe
+            allowFullScreen
+            allowTransparency="true"
+            frameBorder="0"
+            height="180"
+            scrolling="no"
+            src={`https://fast.wistia.net/embed/iframe/${props.videoId}?seo=false&videoFoam=true`}
+            title="📹"
+            width="320"
+        />
+        <script
+            async
+            src="https://fast.wistia.net/assets/external/E-v1.js"
+        />
+    </div>
+);
+
+ExtensionVideo.propTypes = {
+    videoId: PropTypes.string
+};
+
+module.exports = ExtensionVideo;

src/views/ev3/ev3.jsx

@@ -13,6 +13,7 @@ const OSChooser = require('../../components/os-chooser/os-chooser.jsx');
 
 const ExtensionLanding = require('../../components/extension-landing/extension-landing.jsx');
 const ExtensionHeader = require('../../components/extension-landing/extension-header.jsx');
+const ExtensionVideo = require('../../components/extension-landing/extension-video.jsx');
 const ExtensionRequirements = require('../../components/extension-landing/extension-requirements.jsx');
 const ExtensionSection = require('../../components/extension-landing/extension-section.jsx');
 const InstallScratchLink = require('../../components/extension-landing/install-scratch-link.jsx');
@@ -54,9 +55,9 @@ class EV3 extends ExtensionLanding {
                             />
                         </FlexRow>
                     }
-                    renderImage={<img
-                        alt={this.props.intl.formatMessage({id: 'ev3.imgAltEv3Illustration'})}
-                        src="/images/ev3/ev3-illustration.png"
+                    renderImage={
+                        <ExtensionVideo
+                            videoId="0huu6wfiki"
                         />}
                     renderRequirements={
                         <ExtensionRequirements>

src/views/wedo2/wedo2.jsx

@@ -13,6 +13,7 @@ const OSChooser = require('../../components/os-chooser/os-chooser.jsx');
 
 const ExtensionLanding = require('../../components/extension-landing/extension-landing.jsx');
 const ExtensionHeader = require('../../components/extension-landing/extension-header.jsx');
+const ExtensionVideo = require('../../components/extension-landing/extension-video.jsx');
 const ExtensionRequirements = require('../../components/extension-landing/extension-requirements.jsx');
 const ExtensionSection = require('../../components/extension-landing/extension-section.jsx');
 const InstallScratchLink = require('../../components/extension-landing/install-scratch-link.jsx');
@@ -52,22 +53,9 @@ class Wedo2 extends ExtensionLanding {
                         </FlexRow>
                     }
                     renderImage={
-                        <div className="video-player">
-                            <iframe
-                                allowFullScreen
-                                allowTransparency="true"
-                                frameBorder="0"
-                                height="180"
-                                scrolling="no"
-                                src={`https://fast.wistia.net/embed/iframe/4im7iizv47?seo=false&videoFoam=true`}
-                                title="📹"
-                                width="320"
+                        <ExtensionVideo
+                            videoId="4im7iizv47"
                         />
-                            <script
-                                async
-                                src="https://fast.wistia.net/assets/external/E-v1.js"
-                            />
-                        </div>
                     }
                     renderRequirements={
                         <ExtensionRequirements>