CODEWITHSUNDEEP
cssreactjsvideo
werw werw
werw werw

Reputation: 241

Css video background not working

Technologies: ReactJS, SAAS.

What I want to have: an autoplaying, muted, looped video in the background.

My issue: When I uploaded the code from some example with sample-video everything was working as expected. The issue is that I want to have another video in the background. I tried putting it on vimeo and using it from my computer and neither of there options works. When I use the URL provided by vimeo nothing is rendered and I don't see any errors or console warnings. Also video doesn't appear in elements. When I uploaded it from my computer I got error: 

GET http://localhost:8888/book.mp4 404

or when using whole path to file

Not allowed to load local resource: file:///C:/pathToFile

React code

import React, {Component} from 'react';

import styles from './Share.scss'

class Share extends Component {
    render() {
        return (
            <div className={styles.layout}>
                <video className={styles.background_video}  autoPlay loop muted>
                    <source src="https://player.vimeo.com/video/239482445"
                            type="video/mp4"/>
                    <source src="https://player.vimeo.com/video/239482445"
                            type="video/ogg"/>
                    Your browser does not support the video tag.
                </video>
                </div>
    )}
}

export default Share;

SCSS

.background_video{
  height: 100%;
  width: 100%;
  float: left;
  top: 0;
  padding: none;
  position: fixed; 
}

Upvotes: 2

Views: 1664

Answers (1)

Max Gram
Max Gram

Reputation: 695

You are trying to serve a full html Vimeo page as a video source (check what https://player.vimeo.com/video/239482445 returns). This is never going to work because HTML tag <source> in <video> must get a link to actual video, not another html page.

There are two ways you can go from here.

  1. add actual video link to the src attribute. For example, <source src="http://www.coverr.co/s3/mp4/Vacay_Mode.mp4" type="video/mp4"/>

  2. Load Vimeo link in iframe and deal with their API to remove all the buttons and unnecessary content like user avatar. Vimeo has those API options as paid feature btw.

Just to save you some time - option #2 also has problems. Vimeo will adjust width and height of the video to fit the screen, so it's not going to be a true cover video and will have black borers around video if video ratio doesn't 100% match screen ratio.

If you'd like you load video from your static folder you'd have to run server like Express. If I'm not mistaken, it won't be accessible through your local file system requests.

Upvotes: 1

Related Questions