diff --git a/src/components/extension-landing/extension-landing.scss b/src/components/extension-landing/extension-landing.scss
index 96a763cbb..2c6805e55 100644
--- a/src/components/extension-landing/extension-landing.scss
+++ b/src/components/extension-landing/extension-landing.scss
@@ -114,6 +114,13 @@
color: $ui-white;
}
}
+
+ .video-player {
+ border: .25rem solid $ui-white-15percent;
+ border-radius: .75rem;
+ height: 180px;
+ overflow: hidden;
+ }
}
.extension-image {
diff --git a/src/components/extension-landing/extension-video.jsx b/src/components/extension-landing/extension-video.jsx
new file mode 100644
index 000000000..e8b068290
--- /dev/null
+++ b/src/components/extension-landing/extension-video.jsx
@@ -0,0 +1,29 @@
+const PropTypes = require('prop-types');
+const React = require('react');
+
+require('./extension-landing.scss');
+
+const ExtensionVideo = props => (
+
+
+
+
+);
+
+ExtensionVideo.propTypes = {
+ videoId: PropTypes.string
+};
+
+module.exports = ExtensionVideo;
diff --git a/src/views/ev3/ev3.jsx b/src/views/ev3/ev3.jsx
index 011b67b2d..9e06531a2 100644
--- a/src/views/ev3/ev3.jsx
+++ b/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,10 +55,10 @@ class EV3 extends ExtensionLanding {
/>
}
- renderImage={}
+ renderImage={
+ }
renderRequirements={
diff --git a/src/views/wedo2/wedo2.jsx b/src/views/wedo2/wedo2.jsx
index 2b1aa7374..563560726 100644
--- a/src/views/wedo2/wedo2.jsx
+++ b/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');
@@ -51,10 +52,11 @@ class Wedo2 extends ExtensionLanding {
/>
}
- renderImage={}
+ renderImage={
+
+ }
renderRequirements={