SBIT-142: Release a PROD

src/components/videoBackground/VideoBackground.js

@@ -1,8 +1,9 @@
 import React, { useEffect, useRef, useState } from "react"
 import ButtonLink from "../ButtonLink/ButtonLink"
 import "./videoBackground.scss"
+
 const VideoBackground = ({
-  data: { video, description, button, strapi_component, id, backgroundImage },
+  data: { video, description, button, strapi_component, id, backgroundImage, videoUrl },
 }) => {
   const [isVideoPause, setIsVideoPause] = useState(false)
   const videoRef = useRef(null)
@@ -32,6 +33,14 @@ const VideoBackground = ({
     localStorage.setItem("videoPaused", isVideoPause)
   }, [isVideoPause])
 
+  const url = videoUrl?.replace("watch?v=", "embed/")
+  let code = url?.substring(url.lastIndexOf("/") + 1, url.length)
+  const codeIndex = code?.indexOf("?")
+
+  if (codeIndex !== -1 && code !== undefined) {
+    code = code.substring(0, code.indexOf("?"))
+  }
+
   return (
     <div
       className={`${backgroundImage && "pt-5"} pb-3`}
@@ -47,22 +56,51 @@ const VideoBackground = ({
           className="videoBackground"
           style={{ marginTop: backgroundImage && 130 }}
         >
-          <video
-            ref={videoRef}
-            muted
-            autoPlay
-            loop
-            src={video.url}
-            type="video/mp4"
-            controls={false}
-            onClick={pausePlay}
-          />
-          <div className="videoBackground-card">
-            <h5>{description}</h5>
-            <button className="px-4">
-              <ButtonLink button={button} />
-            </button>
-          </div>
+          {(video?.url !== null && video?.url !== undefined) ?
+            <video
+              className="video"
+              ref={videoRef}
+              muted
+              autoPlay
+              loop
+              src={video.url}
+              type="video/mp4"
+              controls={false}
+              onClick={pausePlay}
+            /> : (videoUrl !== null && videoUrl !== undefined) && (
+              <>
+                {(url !== undefined && code !== undefined) && (
+                  <iframe
+                    className="video"
+                    loading="lazy"
+                    type="text/html"
+                    srcDoc={`<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;
+                    width:100%;height:100%;object-fit: cover;top:0;bottom:0}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;margin:auto;text-shadow:0 0 0.5em black}</style>
+                    <a href=${url + "?rel=0"}>
+                    <img src=https://img.youtube.com/vi/${code}/hqdefault.jpg alt='Video' height='100%'>
+                    <span>▶</span></a>`}
+                    src={url + "?rel=0"}
+                    frameBorder="0"
+                    allowFullScreen
+                    title="benefits_video"
+                    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+                    webkitallowfullscreen="true"
+                    mozallowfullscreen="true"
+                  ></iframe>
+                )
+                }
+              </>
+            )
+          }
+
+          {description &&
+            <div className="videoBackground-card">
+              <h5>{description}</h5>
+              <button className="px-4">
+                <ButtonLink button={button} />
+              </button>
+            </div>
+          }
         </section>
       </div>
     </div>

src/components/videoBackground/videoBackground.scss

@@ -5,9 +5,10 @@
     margin-top: 50px;
     margin-bottom: 50px;
   }
-  video {
+  video,
+  iframe {
     width: 100%;
-    height: 250px;
+    height: 220px;
     object-fit: cover;
     display: block;
     border-radius: 5px;
@@ -37,7 +38,7 @@
 @media screen and (min-width: $breakpoint-md) {
   .videoBackground {
     // width: calc(100% - 6em);
-    height: 550px;
+    height: 400px;
     position: relative;
     z-index: 3;
     display: flex;
@@ -46,7 +47,7 @@
       margin-top: 80px;
       margin-bottom: 80px;
     }
-    video {
+    .video {
       top: 0;
       position: absolute;
       width: 100%;
@@ -81,13 +82,19 @@
 
 @media screen and (min-width: $breakpoint-lg) {
   .videoBackground {
-    height: 80vh;
+    height: 520px;
     &-container {
       margin-bottom: 80px;
     }
   }
 }
 
+@media screen and (min-width: $breakpoint-xl) {
+  .videoBackground {
+    height: 720px;
+  }
+}
+
 // @media screen and (max-width: $breakpoint-md) {
 //   .videoBackground {
 //     height: 500px;