CODEWITHSUNDEEP
htmlcssvideo
Daniel Isaac Chavez
Daniel Isaac Chavez

Reputation: 101

background css video help needed

Is there anyway I can put a video background in the css file?

google

 .home-sec {
    padding-top: 10px;
    padding-bottom: 60px;
    background: url(../vdc-video.MP4) no-repeat;
    padding: 0;
    -webkit-background-size: cover;
    background-size: cover;
    color: #fff;
    background-attachment: fixed;
}

not sure if I can do that syntax.

Upvotes: 0

Views: 69

Answers (2)

Trace Cannon
Trace Cannon

Reputation: 13

You cant play a video in CSS. CSS can define what shape and where it is located in the HTML page. However HTML is where the video will actually play.

https://www.w3schools.com/howto/howto_css_fullscreen_video.asp is a good place to learn how to get your video running.

Please note good practice is to give the user an option to watch the video or not. The reason behind this is data consumption. There are a large number of people who do not have unlimited data plans and video/s eat large amounts of data.

Upvotes: 0

Nevil Saul Blemuss
Nevil Saul Blemuss

Reputation: 345

You cant include video source in the css so what you do is to add video in your body then set autoplay ,mute the video then loop. Make the video fixed to prevent scroll

<video autoplay muted loop id="bgvideo">
  <source src="https://www.w3schools.com/howto/rain.mp4" type="video/mp4">
</video>


<div class="content">
  <h1>content</h1>
  <p>Check background</p>
</div>

css

#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%; 
  min-height: 100%;
}
.content {
  position: fixed;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #f1f1f1;
  width: 100%;
  padding: 20px;
  height:100%;
}

Upvotes: 1

Related Questions