3

I have created a video component in reactjs. When give the link of video in src then it's working fine but when I try to put the youtube video url then the video is not getting load. Below is my code for video link Appone.js

import React, { useState, useRef } from "react";
import { Col, Container, Row } from "reactstrap";
import "./MobVideo.css";

function MobVideo() {
  const slider = useRef();
  const videoslider = (links) => {
    slider.current.src = links;
  };
  return (
    <div id="showreal" className="video-title">
      <h1>With video Url</h1>
      <div
        className="video-slider-container mt-4 mb-4"
        style={{ maxWidth: "100%" }}
      >
        <video
          src="https://ak.picdn.net/shutterstock/videos/1054733276/preview/stock-footage-the-girl-walks-through-the-meadow-in-thick-high-grass-and-her-hand-touches-the-tops-of-the-ears-in.webm"
          ref={slider}
          className="slider"
          autoplay
          loop
          controls
        ></video>
        <ul>
          <li
            onClick={() =>
              videoslider(
                "https://ak.picdn.net/shutterstock/videos/1054733276/preview/stock-footage-the-girl-walks-through-the-meadow-in-thick-high-grass-and-her-hand-touches-the-tops-of-the-ears-in.webm"
              )
            }
          >
            <video src="https://ak.picdn.net/shutterstock/videos/1054733276/preview/stock-footage-the-girl-walks-through-the-meadow-in-thick-high-grass-and-her-hand-touches-the-tops-of-the-ears-in.webm"></video>
          </li>
          <li
            onClick={() =>
              videoslider(
                "https://ak.picdn.net/shutterstock/videos/1033184651/preview/stock-footage-camera-follows-hipster-millennial-young-woman-in-orange-jacket-running-up-on-top-of-mountain-summit.webm"
              )
            }
          >
            <video src="https://ak.picdn.net/shutterstock/videos/1033184651/preview/stock-footage-camera-follows-hipster-millennial-young-woman-in-orange-jacket-running-up-on-top-of-mountain-summit.webm"></video>
          </li>
          <li
            onClick={() =>
              videoslider(
                "https://ak.picdn.net/shutterstock/videos/1054740791/preview/stock-footage-happy-girl-teen-child-closed-her-eyes-dream-teenage-kid-wants-a-dream-come-true-portrait-at-sunset.webm"
              )
            }
          >
            <video src="https://ak.picdn.net/shutterstock/videos/1054740791/preview/stock-footage-happy-girl-teen-child-closed-her-eyes-dream-teenage-kid-wants-a-dream-come-true-portrait-at-sunset.webm"></video>
          </li>         
        </ul>
      </div>
    </div>
  );
}

export default MobVideo;

Mobvideo.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.video-title {
  background-color: #0b060269;
  padding-top: 0.1rem;
  /* padding-bottom: 0.5rem; */
}

.video-slider-container {
  max-width: 100%;
  height: 70vh;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.video-slider-container .slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.video-slider-container ul {
  position: absolute;
  bottom: -60px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 20;
}

.video-slider-container ul li {
  list-style: none;
  cursor: pointer;
  margin: 10px;
}

.video-slider-container ul li video {
  width: 50px;
  transition: all 0.3s;
}
.video-slider-container ul li video:hover {
  transform: scale(1.1);
}

video {
  width: 100%;
  height: 100%;
}

@media screen and(max-width: 599px) {
  .video-slider-container {
    max-width: 100%;
    height: 40vh;
  }
  .video-slider-container ul li {
    margin: 5px;
  }
  .video-slider-container ul li video {
    width: 30px;
  }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .video-slider-container {
    max-width: 100%;
    height: 80vh;
  }
}

@media (max-width: 768px) {
  .video-slider-container {
    max-width: 100%;
    height: 40vh;
  }
}

Whenever I tried to put the youtube link then the video and bottom thumbnails not getting load. I don't know what is the issue in this. How can I solve this? Below I have provided the Code link codesandbox

Zehar
  • 101
  • 5

2 Answers2

1

Don't use video tag if you want to use YouTube links

Also, if your YouTube link looks like https://www.youtube.com/watch?v=TlN5frP4VuI&t=253s

then maybe your video will not work.

so, use https://www.youtube.com/embed/eSIJddEieLI?autoplay=1&mute=1

example:-

                            <iframe
                            width="420"
                            height="315"
                            src="https://www.youtube.com/embed/eSIJddEieLI? 
                            autoplay=1&mute=1"
                            title="YouTube video player"
                            frameborder="0"
                          ></iframe>
Deepak Singh
  • 749
  • 4
  • 16
0

According to Google embedded guide, you would need to use an iframe instead:

So change your <video> from:

<video
  src="https://www.youtube.com/watch?v=FUiu-cdu6mA&ab_channel=AjukZz"
  ref={slider}
  className="slider"
  autoplay
  loop
  controls
></video>;

TO:

<iframe
  width="560"
  height="315"
  auto
  src="https://www.youtube.com/embed/z2OXnXu3_nc?controls=0&autoplay=1"
  title="YouTube video player"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
></iframe>;

Working Example:

Edit wizardly-zhukovsky-l3cld

Ryan Le
  • 7,708
  • 1
  • 13
  • 23
  • And how can we fix this `onClick={() => videoslider("" )` ? – Zehar Sep 12 '21 at 09:40
  • I made changes as your suggestions but still no hope. You can check my changes in given link – Zehar Sep 12 '21 at 09:51
  • For that, you would need to have a different setup, like show [thumbnail](https://stackoverflow.com/questions/2068344/how-do-i-get-a-youtube-video-thumbnail-from-the-youtube-api?rq=1) in an array and then change the URL of the main content. – Ryan Le Sep 12 '21 at 10:00
  • In the context of this question, I can only give you a way to load embedded youtube videos, If you would need a solution for the youtube slider, please raise another question, I'll try to help you there. – Ryan Le Sep 12 '21 at 10:01