Change background-color of html5 video element - html

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.

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

Just add the background color to the html code itself. For example:
<video width="100%" height="100%" style="background-color: #fff;" src=""></video>

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

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;
}

Related

Can't change video's opacity in reactjs

I would like to add some green opacity to my react video, but fail to to do.
I tried with adding background-color: rgba(0, 255, 0, 0.3) to each of the divs, but nothing is helping me out.
Using the latest version of Chrome.
Can someone help me out with this?
Here is my code:
<div className="intro__video fadeIn">
<video className="intro__video__content" autoPlay muted loop>
<source src={bgVideo} type="video/mp4" />
<source src="img/video.webm" type="video/webm" />
Your browser is not supported!
</video>
</div>
and my css:
intro__video {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: -1;
opacity: .15;
overflow: hidden;
&__content {
height: 100%;
width: 100%;
object-fit: cover;
// opacity: .85;
background-color: rgba(0, 255, 0, 0.3);
}
}
}
with the commented out opacity it works. But background does not. Why?
The opacity describes how opaque the whole element is: Including its descendants and content.
The background-colour describes the colour in the background of the element. The descendants and content are rendered on top of it.
If you want to use a background colour to shade an element, you have to set the background colour on something in front of the content you want to shade.
You might want to look at SVG filters instead.

Background blur not working in IE Browser

So, I'm developing a website based on CSS3. Here is a part of code which trying to make the background blur.
.blur {
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');
}
I know that IE is not supported for blur filter. I search for article they said I have to use SVG to solve this problem. But somehow my website is using in a scenario that there is no internet which mean that I cant access any url when browsing it. Is there anyway to solve this problem without using SVG?
One way that I can think of is basically just duplicating the background container and changing the opacity and moving the image slightly to give yourself a blur. Another option you have would be to just create another image to put on your server, and just use photoshop to blur it and then switch the picture
img:first-child {
opacity: 1;
}
img {
opacity: 0.2;
position: absolute;
top: 0;
}
img:nth-child(2) {
left: 1px;
}
img:nth-child(3) {
left: 2px;
}
img:nth-child(4) {
left: 3px;
}
img:nth-child(5) {
left: 4px;
}
<img src="https://placekitten.com/600/600"/>
<img src="https://placekitten.com/600/600"/>
<img src="https://placekitten.com/600/600"/>
<img src="https://placekitten.com/600/600"/>
<img src="https://placekitten.com/600/600"/>

Blur effect to whole website but one whild element

I've added this .blur class to body tag to blur whole website.
CSS
.blur {
filter: blur(1px);
filter: url("blur.svg#gaussian_blur");
-webkit-filter: blur(1px);
-o-filter: blur(2px);
}
HTML
<body class="blur">
...
<div class="mustBeClear"></div> <!-- somewhere in the page-->
...
</body>
How to keep .mustBeClear class not blured.
I've tried
.mustBeClear{
filter: none;
-webkit-filter: none;
-o-filter: none;
}
but, it does not work!
What you are trying to do is not possible. Because SVG filters get applied to an entire element at once, you cannot then selectively "undo" the filter for a single child element.
What I would recommend instead is to only blur the element that you want to be blurred, then you can use absolute positioning on another element on top that does not have the blur effect.
Here is a live example to illustrate what I'm talking about:
.container {
position: relative;
top: 50px;
left: 50px;
}
.blur {
filter: blur(5px);
-webkit-filter: blur(5px);
-o-filter: blur(5px);
}
#text {
position: absolute;
left: 50px;
top: 50px;
}
<div id="container">
<div class="blur">
<img src="http://i.imgur.com/5LGqY2p.jpg?1" />
</div>
<div id="text">Not Blurred Text</div>
</div>

Css blurry glass effect filters not working

I am trying to do a css blurry glass effect with filters, but it's not working in the way it should.
The div has no opacity at all and it's not blurry.
Code(CSS):
#siteDesc
{
text-align: center;
background-color: #FFFFFF;
width: 1200px;
margin: 0 auto;
margin-top: 30px;
padding: 10px;
padding-bottom: 20px;
border-radius: 5px;
}
#siteDesc:after
{
opacity: 0.7;
filter: blur(1px);
-moz-filter: blur(1px);
-webkit-filter: blur(1px);
-o-filter: blur(1px);
}
Edit:
Link to jsfiddle: http://jsfiddle.net/qy1sar8h/
Updated for relevance Sep 2021
There is a backdrop-filter CSS property that can achieve the frosted glass look.
See https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter for full details.
It is part of CSS Filter Effects Module Level 2 and the syntax for a blur filter is as follows:
backdrop-filter: blur(10px);
The background of the element will be blurred, but not the content or descendent elements.
To create a frosted glass effect, combine this property with an RGBA background colour that gives the background some transparency, e.g.:
background-colour: Reba(255, 255, 255, 0.7);
backdrop-filter: blur(10px);
This feature is available in all major browsers except Firefox (available behind a flag from Firefox 70) and Internet Explorer.
The technique you attempted will blur the full contents of whatever element it is applied to, and not just the background as you intended.
The only technique I know involves faking the blur with positioned background images either using a pre-blurred image or taking advantage of the filter CSS property to blur the original. I don't use this technique because it's too easy for the images to be out of alignment and your trick no longer looks good.
The pseudo-element won't render without a content property and, in any case will not blur the associated parent div.
Applying a filter to the pseudo-element will only blur the content of the pseudo-element.
body {
background-color: #37E1E4;
}
#siteDesc {
text-align: center;
background-color: #FFFFFF;
margin: 0 auto;
margin-top: 30px;
padding: 10px;
padding-bottom: 20px;
border-radius: 5px;
}
#siteDesc:after {
content: 'SOME TEXT';
opacity: 0.7;
filter: blur(1px);
-moz-filter: blur(1px);
-webkit-filter: blur(1px);
-o-filter: blur(1px);
}
<div id="siteDesc">
<p>Hello, this is my fiddle.</p>
</div>
If you apply the blur to the div itself you get this: JSFiddle Demo
EDIT: It's not entirely clear how this is supposed to look but the only option I see for blurring the background is not to have background on div element itself but rather simulate a background with a pseudo-element.
body {
background-color: #37E1E4;
}
#siteDesc {
text-align: center;
width: 90%;
margin: 10px auto;
margin-top: 30px;
padding: 10px;
padding-bottom: 20px;
border-radius: 5px;
position: relative;
font-weight:bold;
}
#siteDesc:before {
content: '';
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
-webkit-filter: blur(1px);
filter: blur(1px);
background-color: rgba(255,255,255,0.7);
z-index:-1;
}
<div id="siteDesc">
<p>Hello, this is my fiddle.</p>
</div>

How to blur a div (box)

How can I apply a Gaussian blur using CSS to a DIV which contains text. Basically, what I want to achieve is to have the box with a gaussian blur but the text in a normal way. Can this be done? I don't know how, I've been trying but I just can't.
Example:
Like I have my div at opacity: 0.75 I would like my div to be transparent but with gaussian blur, since in the background I have a moving image, so I want the box to be blurred.
Apply following CSS to your block:
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
However, this property works only in modern browsers: compatibility table
Well I don't think you can achieve what you are looking for without some extra div or even better a pseudo-element. My suggestion would be:
div {
position:relative;
width: 10em;
height: 20em;
padding: 1em;
}
div::before {
content: '';
position:absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
background: url(http://upload.wikimedia.org/wikipedia/en/6/6c/Some_Girls.png);
z-index: -1;
}
Your question is not too clear though so I am not sure if this is what you are looking for...
Pen: http://codepen.io/marczking/pen/dqxwG