somewhat getting the second carousel but with some problems

src/components/rameelo/landing/landing.js

@@ -313,31 +313,9 @@ function LandingContent(props) {
           </span>
           <span className="video-slider-container">
             <Slider {...videoSliderSettings}>
-              <span className="video-slide">
+              <span className="video-slide"></span>
-                <ReactPlayer
+              <span className="video-slide"></span>
-                  controls={true}
+              <span className="video-slide"></span>
-                  url="https://www.youtube.com/watch?v=gOPEpsGJyCs"
-                />
-              </span>
-              <span className="video-slide">
-                <ReactPlayer
-                  controls={true}
-                  url="https://www.youtube.com/watch?v=gOPEpsGJyCs"
-                />
-              </span>
-              <span className="video-slide">
-                <ReactPlayer
-                  controls={true}
-                  url="https://www.youtube.com/watch?v=gOPEpsGJyCs"
-                />
-              </span>
-
-              <span className="video-slide">
-                <ReactPlayer
-                  controls={true}
-                  url="https://www.youtube.com/watch?v=gOPEpsGJyCs"
-                />
-              </span>
             </Slider>
           </span>
         </div>

src/components/rameelo/landing/landing.scss

@@ -326,7 +326,7 @@ button.slick-arrow::before {
     padding: 1.5rem 0;
 
     .join-card {
-      min-width: 391px;
+      width: 391px;
       min-height: 246px;
       background-color: $red;
       display: flex;
@@ -370,6 +370,11 @@ button.slick-arrow::before {
       padding: 0 1.5em;
 
       .video-slide {
+        background-image: url('../../../images/rameelo/rameelo_cover_photo.png');
+        background-position: center;
+        width: 320px !important;
+        height: 220px !important;
+
         div {
           width: 320px !important;
           height: 220px !important;