CODEWITHSUNDEEP
css
Alex
Alex

Reputation: 59

Can you use a video as a background css?

I am looking to load a video like how I would a background-image in the CSS. The reason behind this is so I can customise more display options of the video, like how I could an image in the CSS. My problem of loading the video using video and source tags is that I cannot change the styling as much as I desire.

Any suggestions?

Upvotes: 0

Views: 280

Answers (1)

Architect
Architect

Reputation: 356

Try this:

CSS

.video-container {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  height: 100%; 
  overflow: hidden;
}

.video-container video {
  min-width: 100%; 
  min-height: 100%;
  width: auto;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}

HTML

<div class="video-container">
  <video autoplay muted loop>
    <source src="your_video_url.mp4" type="video/mp4">
    <source src="your_video_url.webm" type="video/webm">
  </video>
</div>

Let me know if this worked.

Upvotes: 2

Related Questions