背景视频的后备图片无法正常运行

Question

我试图弄清楚为什么我网站上的背景视频的后备图像无法正常工作。当视频不加载时，它会显示空白而不是图像。

该视频也不会在移动浏览器-Google Chrome中显示（显示空白）。在移动设备-Opera上，它会显示视频的静止图像，但无法播放。这些问题的任何帮助将不胜感激。

jest.mock('utils/api.js');
test('succesful trip create calls onTripCreate prop', async () => {
    const trip = {'name': faker.random.word()};

    const spy = jest.fn();
    const container = shallow(<TripCreateContainer onTripCreate={spy}/>);

    container.setState({'trip': trip});
    container.instance().create();

    // Pause the synchronous test here and let any queued callbacks execute
    await Promise.resolve();

    expect(spy).toHaveBeenCalledWith(trip);
    expect(container.state('trip')).toEqual({});
    expect(container.state('errors')).toEqual([]);
});

#video_container {
    overflow: hidden;
    z-index: 2;
    position: relative;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.8), 0 0 40px rgba(0, 0, 0, 0.8);
}

#bgvid {
    height: auto;
    min-height: 100%;
    object-fit: cover;
    width: 100%;
    display: block;
}
 @media (min-width: 768px) {
 #video_container {
     height: 99vh;
     }
 }

 @media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1.5) {

    #video_container {
        height: auto;
    }

}

/* Edge Hack */

@supports (-ms-ime-align:auto) {
    #video_container {
        height: auto !important;
    }
}