gcg/static-cms
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

docs: fix video play button browser compatibility (#1640)

Browse Source
This commit is contained in:
Edouard Duplessis
2018-09-05 09:08:20 -04:00
committed by Shawn Erquhart
parent 0d0180966a
commit eb27aff5c0
3 changed files with 33 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
website/src/components/video-embed.js
View File

@ -2,6 +2,20 @@ import React, { Component } from 'react';
import screenshotEditor from '../img/screenshot-editor.jpg'; import screenshotEditor from '../img/screenshot-editor.jpg';
/**
* We should be able to import complete inline svg's rather than base64, this
* component is a stopgap for now. Source in '../img/play.svg'.
*/
const PlayIcon = ({ className }) => (
<svg className={className} viewBox="0 0 43 44">
<path
d="M41.5156904,23.7808694 L2.91022212,43.5125531 C1.92667513,44.0152549 0.721832431,43.6254529 0.219130636,42.6419059 C0.07510106,42.3601089 -3.51395713e-15,42.048155 -3.55271368e-15,41.7316838 L-1.77635684e-15,2.26831623 C-2.40215499e-15,1.16374673 0.8954305,0.268316226 2,0.268316226 C2.31647127,0.268316226 2.62842512,0.343417285 2.91022212,0.487446861 L41.5156904,20.2191306 C42.4992374,20.7218324 42.8890394,21.9266751 42.3863376,22.9102221 C42.1949001,23.2847739 41.8902421,23.5894318 41.5156904,23.7808694 Z"
id="Triangle"
fillRule="nonzero"
/>
</svg>
);
class VideoEmbed extends Component { class VideoEmbed extends Component {
state = { state = {
toggled: false, toggled: false,
@ -30,7 +44,11 @@ class VideoEmbed extends Component {
return ( return (
<a className="hero-graphic" onClick={this.toggleVideo}> <a className="hero-graphic" onClick={this.toggleVideo}>
{toggled ? embedcode : imgPlaceholder} {toggled ? embedcode : imgPlaceholder}
{!toggled && <div className="hero-videolink">&#x25b6;</div>} {!toggled && (
<div className="hero-videolink">
<PlayIcon className="hero-videolink-arrow" />
</div>
)}
</a> </a>
); );
} }

15
website/src/css/imports/hero.css
View File

@ -119,23 +119,30 @@
right: 0; right: 0;
width: 90px; width: 90px;
height: 90px; height: 90px;
font-size: 64px;
font-weight: $semibold;
text-align: center;
color: $blue; color: $blue;
background-color: rgba(255, 255, 255, 0.85); background-color: rgba(255, 255, 255, 0.85);
box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.05), 0 1px 3px 0 rgba(0, 0, 0, 0.15); box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.05), 0 1px 3px 0 rgba(0, 0, 0, 0.15);
border-radius: 100px; border-radius: 100px;
transition: 0.1s; transition: 0.1s;
} }
.hero-videolink-arrow {
position: absolute;
left: 33px;
top: 28px;
width: 44px;
height: 44px;
fill: #3a69c7;
}
&:hover { &:hover {
.hero-videolink { .hero-videolink {
color: white;
background-color: $blue; background-color: $blue;
box-shadow: 0 6px 18px 0 rgba(0, 0, 0, 0.15), 0 2px 6px 0 rgba(0, 0, 0, 0.3); box-shadow: 0 6px 18px 0 rgba(0, 0, 0, 0.15), 0 2px 6px 0 rgba(0, 0, 0, 0.3);
transform: scale(1.1); transform: scale(1.1);
} }
.hero-videolink-arrow {
fill: #fff;
}
} }
&:active { &:active {

3
website/src/img/play.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="43px" height="44px" viewBox="0 0 43 44">
<path d="M41.5156904,23.7808694 L2.91022212,43.5125531 C1.92667513,44.0152549 0.721832431,43.6254529 0.219130636,42.6419059 C0.07510106,42.3601089 -3.51395713e-15,42.048155 -3.55271368e-15,41.7316838 L-1.77635684e-15,2.26831623 C-2.40215499e-15,1.16374673 0.8954305,0.268316226 2,0.268316226 C2.31647127,0.268316226 2.62842512,0.343417285 2.91022212,0.487446861 L41.5156904,20.2191306 C42.4992374,20.7218324 42.8890394,21.9266751 42.3863376,22.9102221 C42.1949001,23.2847739 41.8902421,23.5894318 41.5156904,23.7808694 Z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 593 B