Add CPS video

src/components/video-preview/video-preview.jsx

@@ -30,6 +30,7 @@ class VideoPreview extends React.Component {
                         <Video
                             className="video"
                             height={this.props.videoHeight}
+                            isYouTube={this.props.isYouTube}
                             videoId={this.props.videoId}
                             width={this.props.videoWidth}
                         />
@@ -60,8 +61,13 @@ class VideoPreview extends React.Component {
     }
 }
 
+VideoPreview.defaultProps = {
+    isYouTube: false
+};
+
 VideoPreview.propTypes = {
     buttonMessage: PropTypes.string.isRequired,
+    isYouTube: PropTypes.bool,
     thumbnail: PropTypes.string.isRequired,
     thumbnailHeight: PropTypes.string,
     thumbnailWidth: PropTypes.string,

src/views/annual-report/annual-report.jsx

@@ -1504,25 +1504,27 @@ class AnnualReport extends React.Component {
                                     <div className="video-background cps">
                                         <MediaQuery minWidth={frameless.tabletPortrait}>
                                             <VideoPreview
+                                                isYouTube
                                                 buttonMessage={
                                                     this.props.intl.formatMessage({id: 'annualReport.watchVideo'})
                                                 }
                                                 thumbnail="/images/annual-report/initiatives/schools/CPS Story/CPS Video Thumbnail.png"
                                                 thumbnailWidth="580"
                                                 videoHeight="320"
-                                                videoId="joal01i8b1"
+                                                videoId="9QD9IxOinLg"
                                                 videoWidth="568"
                                             />
                                         </MediaQuery>
                                         <MediaQuery maxWidth={frameless.tabletPortrait - 1}>
                                             <VideoPreview
+                                                isYouTube
                                                 buttonMessage={
                                                     this.props.intl.formatMessage({id: 'annualReport.watchVideo'})
                                                 }
                                                 thumbnail="/images/annual-report/initiatives/schools/CPS Story/CPS Video Thumbnail.png"
                                                 thumbnailWidth="400"
                                                 videoHeight="216"
-                                                videoId="joal01i8b1"
+                                                videoId="9QD9IxOinLg"
                                                 videoWidth="380"
                                             />
                                         </MediaQuery>

src/views/annual-report/annual-report.scss

@@ -1721,6 +1721,10 @@ p {
 
         &.cps {
             background-image: url("/images/annual-report/initiatives/schools/CPS Story/CPS Video Splash.svg");
+
+            .button {
+                background-color: $ui-purple;
+            }
         }
     }
 }