-2

Explain why I get such a url. I'm trying to pull a video from YouTube. Error in console:

GET http://localhost:3000/www.youtube.com/watch?v=IEDEtZ4UVtI 404 (Not Found)
GET http://localhost:3000/www.youtube.com/watch?v=IEDEtZ4UVtI 404 (Not Found)

Why do I have my localhost first and then a link to the video? How can this be fixed? index.js:

import Head from "next/head";
import Image from "next/image";
import styles from "../styles/Home.module.css";

export default function Home() {
  return (
    <div className={styles.wrapper}>
      <video controls>
        <source src="www.youtube.com/watch?v=IEDEtZ4UVtI" type="video/mp4" />
      </video>
    </div>
  );
}

Project folder: Project folder

Arjit Tiwari
  • 410
  • 2
  • 10
Roman
  • 1
  • 3

1 Answers1

1

The URL you are using should start with https://... and the video is unavailable, Use another link

For example use this video https://www.youtube.com/watch?v=ScMzIvxBSi4
You should use iframe with src of https://www.youtube.com/embed/YourVideoId

currently the ID is ScMzIvxBSi4 so

<iframe width="420" height="315"
src="https://www.youtube.com/embed/IEDEtZ4UVtI">

Replace YourVideoId with the video you want
You can also see this documentation

Arjit Tiwari
  • 410
  • 2
  • 10
  • @Roman Your video is unavailable so I am using this [placeholder video](https://www.youtube.com/watch?v=ScMzIvxBSi4) but you can use any. – Arjit Tiwari Mar 15 '22 at 13:23
  • Thanks for figuring it out. @Ankit Tiwari I would like to ask you one more question if possible. Is it possible to download videos from a computer in react/next? – Roman Mar 15 '22 at 13:31
  • When downloading videos from a computer, I encounter almost the same problem: GET http://localhost:3000/pes.mp4 404 (Not Found) GET http://localhost:3000/pes.mp4 404 (Not Found) The pes.mp4 video is at the root of the project. Path to src="../pes.mp4" – Roman Mar 15 '22 at 13:34
  • The video is already on my computer and I would like to show it on my project – Roman Mar 15 '22 at 13:36
  • It didn't help. – Roman Mar 15 '22 at 13:41
  • Your video should be in public folder **public/vis.mp4** – Arjit Tiwari Mar 15 '22 at 13:42