Merge pull request #2622 from apple502j/about-video

About video
This commit is contained in:
chrisgarrity 2019-01-30 18:19:32 +01:00 committed by GitHub
commit 42bc19c2e3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 14 additions and 17 deletions

View file

@ -3,6 +3,7 @@ const FormattedMessage = require('react-intl').FormattedMessage;
const render = require('../../lib/render.jsx');
const Page = require('../../components/page/www/page.jsx');
const Video = require('../../components/video/video.jsx');
require('./about.scss');
@ -22,14 +23,10 @@ const About = () => (
</ul>
</div>
<div>
<iframe
allowFullScreen
frameBorder="0"
mozallowfullscreen={'true'}
src="https://player.vimeo.com/video/65583694?title=0&byline=0&portrait=0"
title="Scratch Overview Video"
webkitallowfullscreen={'true'}
<div className="video-container">
<Video
className="about-scratch-video"
videoId="joal01i8b1"
/>
</div>
</div>
@ -141,7 +138,7 @@ const About = () => (
<h3><FormattedMessage id="about.learnMore" /></h3>
<ul className="list">
<li>
<a href="/tips"><FormattedMessage id="about.learnMoreHelp" /></a>
<a href="/ideas"><FormattedMessage id="about.learnMoreHelp" /></a>
</li>
<li>
<a href="/info/faq"><FormattedMessage id="about.learnMoreFaq" /></a>
@ -150,7 +147,7 @@ const About = () => (
<a href="/parents"><FormattedMessage id="about.learnMoreParents" /></a>
</li>
<li>
<a href="/info/credits"><FormattedMessage id="about.learnMoreCredits" /></a>
<a href="/credits"><FormattedMessage id="about.learnMoreCredits" /></a>
</li>
</ul>
</li>
@ -162,7 +159,7 @@ const About = () => (
values={{
supportersList: 'National Science Foundation, Scratch Foundation, Siegel Family Endowment, Google, LEGO Foundation, Intel, Cartoon Network, Lemann Foundation, MacArthur Foundation', // eslint-disable-line max-len
creditsLink: (
<a href="//scratch.mit.edu/info/credits">
<a href="/credits">
<FormattedMessage id="about.creditsLinkText" />
</a>
),

View file

@ -28,13 +28,13 @@
padding-right: 10px;
}
}
iframe {
display: block;
border: 1px solid $ui-gray;
width: 100%;
height: 290px;
}
div.video-container,
div.about-scratch-video {
height: 225px;
width: 400px;
min-width: 400px;
}
}