CODEWITHSUNDEEP
cssvideobackground
alan skool
alan skool

Reputation: 3

Background Video CSS

I am trying to change the background from an image to a video using only css, no tags, but it won't run. I don't want to insert tags on all pages of the site.

body {
    font-family: "Lato", sans-serif;
    margin-bottom: 10px;
    margin-top: 0px;
    background-image: url('https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4');
}

Upvotes: 0

Views: 761

Answers (2)

user9652589
user9652589

Reputation: 

<video playsinline autoplay muted loop poster="polina.jpg" id="bgvid">
  <source src="{{SOURCE_URL/ SOURCE_FILE}}" type="video/webm">
  <source src="{{SOURCE_URL/ SOURCE_FILE}}" type="video/mp4">
</video>

There are many attributes! The poster attribute shows the video during the loading or when the video is not loaded. Maybe you would like to use a CSS background.

The attribute for autoplay is there, as we want the video to play. Remember that here we're tasty, so that's all right. There are no control attributes, so the user can't start/stop the video. This works on iOS with the play-inline attribute. The silent attribute is good taste (video ought not to have sound, but it also needs iOS to get the autoplay functional. Then it's a loop, well, loop, well.

You can do this to cover the whole page with the video:

video {
  object-fit: cover;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
}

Upvotes: 0

MaxStyle
MaxStyle

Reputation: 11

Cant do it you need to add a video tag.

<video autoplay muted loop id="myVideo">
  <source src="SOURCE_URL" type="video/mp4">
</video>

Upvotes: 1

Related Questions