CODEWITHSUNDEEP
reactjs
Alter80
Alter80

Reputation: 13

Video inside public folder is not playing

When I try to put a banner video in public folder, the code does not play it. When the video is moved to the src/component then it plays. The 'bannerVid2' is kept in the Public folder, and it shows the error.

the error is:

Module not found: Error: You attempted to import ../../../public/videos/video-2.mp4 which falls outside of the project src/ directory. Relative imports outside of src/ are not supported. You can either move it inside src/, or add a symlink to it from project's node_modules/.

I've tried the old method like

<video src='/public/videos/video-2.mp4'/>

but this does not works as well

my code is:

import React from 'react';
import { Button } from '../SharedButton/Button';
import './HeroSection.css';
import bannerVid from './../../videos/video-2.mp4';
import bannerVid2 from '../../../public/videos/video-2.mp4';

const HeroSection = () => {
    return (
        <div className='hero-container'>
            {/* <video src={bannerVid} autoPlay loop muted></video> */} //this line is commented cause it works
            <video src={bannerVid2} autoPlay loop muted></video> //this does not works and shows error 

            <h2>Adventure Awaits</h2>
            <p>What Are You Waiting For!</p>

            <div className='hero-btns'>
                <Button className='btns' buttonStyle='btn--outline'
                    buttonSize='btn--large'> GET STARTED</Button>
                <Button className='btns' buttonStyle='btn--primary'
                    buttonSize='btn--large'>Watch Trailer <i className='far fa-play-circle' /></Button>
            </div>
        </div>
    );
};

export default HeroSection;

Upvotes: 1

Views: 1717

Answers (1)

anthony lu
anthony lu

Reputation: 208

This will work

<video width="320" height="240" controls>
   <source src="/videos/video-2.mp4" type="video/mp4" />
</video>

Upvotes: 1

Related Questions