Give translucent effect on background rather than a video div

Question

I am using a video tag inside a div. Now I want to make the rest of the area translucent or transparent. There is already a background image, so I cant use a transparent png as well.

<div id="WelcomeVideo12"  style="width:100%; margin-left: px;" >
    <video id="frist_video" style="width:97% !important; height:100%;margin-top:-100%;"  autoplay='true' loop='true'>
        <source src="<?php echo $base_url ; ?>upload_media/Welcome.mp4" type="video/mp4">
        <source src="mov_bbb.ogg" type="video/ogg">
        Your browser does not support HTML5 video.
    </video>
</div>

Please help me out.

i want to blur or u can say give a transparent effect like opacity on rest of the area rather than this div — Hitendra Singh Tomar, Jun 22 '15 at 07:58
then can you please give the url of site where you want changes so we can help? — Leo the lion, Jun 22 '15 at 10:30
https://securerthealth.com/original/kiosk/hotline/call2.php?BYNJ54ZK-V8D please open this url and click on guest login there will be a video div.. — Hitendra Singh Tomar, Jun 22 '15 at 11:22
there is no guest login and no background video..please give correct link. — Leo the lion, Jun 22 '15 at 11:30
check console..there are 2 error..if you will solve them, may be your this issue will be also solve.. — Leo the lion, Jun 22 '15 at 11:36
on clicking guest login there will be div of video.. if you are not able to see this plss decrease the size of screen (control - / command -) then you will see i think.... — Hitendra Singh Tomar, Jun 22 '15 at 11:59
and one more thing you will see one moment please and a loading circle.. this is the video div here — Hitendra Singh Tomar, Jun 22 '15 at 12:00

score 0 · Answer 1 · answered Jun 22 '15 at 08:12

0

You can use filter: blur(5px); on your background image with a z-index smaller than your foreground.

answered Jun 22 '15 at 08:12

Anna

101
8

I just found your question answered (if I have the right understanding) here, with a demo: [link](http://stackoverflow.com/questions/20039765/how-to-apply-a-css-3-blur-filter-to-a-background-image) – Anna Jun 22 '15 at 08:14
using your suggestion only the image will be blur... i also want to blur or translucent other things on page... – Hitendra Singh Tomar Jun 22 '15 at 09:39

Give translucent effect on background rather than a video div

1 Answers1