CODEWITHSUNDEEP
htmlcssangularionic-frameworkhtml5-video
user809829
user809829

Reputation: 1189

Change background-color of html5 video element

I've got the following website: beta.leifsigersen.com

There's a movie on the front page which sometimes takes a little while to load (sometimes less than a second, sometimes a few seconds). Before the movie is loaded there's black background/borders. How can I change the color of this?

I've tried to use CSS of the video-element, but without any luck.

Upvotes: 14

Views: 71790

Answers (4)

Sampath
Sampath

Reputation: 65880

I have used overlay content like so: Ionic/Angular

.html

<video autoplay muted loop playsinline preload="auto" onloadedmetadata="this.muted = true">
  <source [src]="video" type="video/mp4" />
</video>

<div class="overlay-content"></div>

.scss

 video {
     object-fit: cover;
     width: 100vw;
     height: 60vh;
     top: 0;
     left: 0;
     opacity: 0.5;
     -webkit-filter: blur(5px);
     -moz-filter: blur(5px);
     -o-filter: blur(5px);
     -ms-filter: blur(5px);
     filter: blur(5px);
 }

 .overlay-content {
     position: absolute;
     top: 0;
     left: 0;
     background: rgba(6, 56, 82, 0.5);
     width: 100vw;
     height: 60vh;
 }

Upvotes: 0

Fuller93
Fuller93

Reputation: 159

Just add the background color to the html code itself. For example:

<video width="100%" height="100%" style="background-color: #fff;" src=""></video>

Upvotes: 5

Sabba Keynejad
Sabba Keynejad

Reputation: 8591

So i had this annoying white bar, I got rid of it using. I applied it the the containing div.

background-color: transparent;

Alternatively use

 background-color: rgba(0, 0, 0, 0);

Hope that helps

Upvotes: 1

mahega
mahega

Reputation: 3321

Try this CSS:

.pk_video {
     background-color: red !important; /* or whatever you want */
}

Upvotes: 10

Related Questions