-1

I'm encountering this weird behavior where my HTML video background just won't appear in my view via my Feed component. I see the <video/> and <source/> tags appearing in Chrome dev tools but I'm just not seeing the background on my browser.

What am I doing wrong and how can I fix it?

import React from 'react';
import './Feed.scss';

const feed = (props) => {
    return (
        <div className="row">
            <video autoPlay muted loop id="myVideo">
                <source src={"../../../background/nyc.mp4"} type="video/mp4"/>
                Your browser does not support HTML5 video.
            </video>
        </div>
    );
};

export default feed;

Here's the CSS:

#myVideo {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
}
luvs2spuge
  • 75
  • 5

1 Answers1

0

You need to import that video in order it to be displayed.

import React from 'react';
import './Feed.scss';
import myVideo from "../../../background/nyc.mp4"


const feed = (props) => {
    return (
        <div className="row">
            <video src={myVideo} type="video/mp4" autoPlay muted loop/>
        </div>
    );
};

export default feed;

Tested by myself and it worked. I assume that you use create-react-app.

Noob
  • 2,247
  • 4
  • 20
  • 31
  • yes I've tried this before: `import myVid from '../../../background/nyc.mp4';` followed by putting in the `src` tag like so: `` but I get an error that says `You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.` – luvs2spuge Sep 22 '19 at 14:12
  • @luvs2spuge https://stackoverflow.com/questions/36230522/adding-a-background-video-with-react take a look at this – Noob Sep 22 '19 at 14:14
  • @luvs2spuge were you able to fix it ? – Noob Sep 22 '19 at 15:56