Change homepage video with YouTube

Author: Haralan Dobrev

src/components/front/pages/Home.js

@@ -7,7 +7,7 @@ import Helmet from 'react-helmet';
 import styled from 'styled-components';
 
 import { Wrapper, MainContent, GreenLine } from '../Front';
-import { VideoWrapper } from './Videos';
+import { VideoWrapper, YouTubeVideoEmbed } from './Videos';
 
 import { MOBILE_WIDTH } from '../Style';
 
@@ -230,9 +230,7 @@ export default props => {
             </HomeButtonWrapper>
             <hr/>
             <h2>Видеа от кампанията</h2>
-            <VideoWrapper>
-                <iframe src="https://www.facebook.com/plugins/video.php?height=314&href=https%3A%2F%2Fwww.facebook.com%2Fdabulgaria.bg%2Fvideos%2F363350401696989%2F&show_text=false&width=560" scrolling="no" frameBorder="0" allowFullScreen={true} allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
-            </VideoWrapper>
+            <YouTubeVideoEmbed videoId={"J_B0525_hcs"} />
             <HomeButtonWrapper>
                 <Link to='/videos'><HomeButton>Виж още видеа</HomeButton></Link>
             </HomeButtonWrapper>

src/components/front/pages/Videos.js

@@ -25,8 +25,8 @@ export const VideoWrapper = styled.div`
     }
 `;
 
-const EmbedYouTubeVideo = props => {
-    const iframeSrc = `https://www.youtube.com/embed/${props.videoId}`;
+export const YouTubeVideoEmbed = ({ videoId }) => {
+    const iframeSrc = `https://www.youtube.com/embed/${videoId}`;
 
     return(
         <VideoWrapper>
@@ -61,17 +61,17 @@ export default () => {
             <MainContent>
                 <h1>Видеа от кампанията</h1>
                 <hr/>
-                <EmbedYouTubeVideo videoId={"JBgplUhCPCQ"} />
-                <EmbedYouTubeVideo videoId={"eOEUrun-I3M"} />
-                <EmbedYouTubeVideo videoId={"CoAk-Lu74rM"} />
-                <EmbedYouTubeVideo videoId={"-1zSi5tq82o"} />
-                <EmbedYouTubeVideo videoId={"yFS9Uv54R34"} />
-                <EmbedYouTubeVideo videoId={"nxM0fnUPDx4"} />
-                <EmbedYouTubeVideo videoId={"-L0y6Ih8id8"} />
-                <EmbedYouTubeVideo videoId={"apAuVIu53Gg"} />
-                <EmbedYouTubeVideo videoId={"xgIZ8uFmmpY"} />
-                <EmbedYouTubeVideo videoId={"Q4Ijwoy2WR8"} />
-                <EmbedYouTubeVideo videoId={"J_B0525_hcs"} />
+                <YouTubeVideoEmbed videoId={"JBgplUhCPCQ"} />
+                <YouTubeVideoEmbed videoId={"eOEUrun-I3M"} />
+                <YouTubeVideoEmbed videoId={"CoAk-Lu74rM"} />
+                <YouTubeVideoEmbed videoId={"-1zSi5tq82o"} />
+                <YouTubeVideoEmbed videoId={"yFS9Uv54R34"} />
+                <YouTubeVideoEmbed videoId={"nxM0fnUPDx4"} />
+                <YouTubeVideoEmbed videoId={"-L0y6Ih8id8"} />
+                <YouTubeVideoEmbed videoId={"apAuVIu53Gg"} />
+                <YouTubeVideoEmbed videoId={"xgIZ8uFmmpY"} />
+                <YouTubeVideoEmbed videoId={"Q4Ijwoy2WR8"} />
+                <YouTubeVideoEmbed videoId={"J_B0525_hcs"} />
             </MainContent>
         </Wrapper>
     )