Почему мой видео фон не появляется через мой компонент?

Question

Я сталкиваюсь с таким странным поведением, когда мой HTML-фон видео просто не отображается в моем представлении через мои Feed component.Я вижу теги <video/> и <source/>, появляющиеся в инструментах разработчика Chrome, но я просто не вижу фон в своем браузере.

Что я делаю не так и как я могу это исправить?

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;

Вот код CSS:

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

Answer 1

Вам нужно импортировать это видео, чтобы оно отображалось.

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;

Протестировано мной, и это сработало.Я предполагаю, что вы используете create-реакции-приложение.