Use video script as div background [ HTML / CSS ]

Question

Sorry if my tune is not good. I have this code of html

HTML:

<div class="video_bg"> ---- Some Code to execute ---</div>

CSS:

.video_bg{
  width:600px;
  height:600px;
  float:left;
  }

and have a video embed code this

<iframe src="//player.vimeo.com/video/71906867" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

Question: Can i use this video as background of div "video_bg" by using any script or css.

score 4 · Accepted Answer · answered Sep 20 '13 at 08:34

4

You can easily use the jquery.videobackground plugin.

Read here: http://georgepaterson.github.io/jquery-videobackground/

answered Sep 20 '13 at 08:34

Nick Schmidt

1,427
1
13
22

1

This gets pretty messed up if the user resizes the browser at all. – sheriffderek Mar 24 '14 at 07:50

score 0 · Answer 2 · answered Sep 20 '13 at 08:37

You mean that you want to place some texts images etc. on the background's video ?
If you mean something like this , you can do it by positioning your div's .
Something like this :

<div class="video_bg"><iframe src="//player.vimeo.com/video/71906867" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe><p class="text">Some text goes here</p></div>
.video_bg iframe{
width: 500px;
height:281px;
position: relative;
}
.text {
position:absolute;
font-size: 20px;
text-align:center;
}

I mean place video as background image. Use a video as a background instead of a image — BigTech, Sep 20 '13 at 09:19

Use video script as div background [ HTML / CSS ]

2 Answers2

Linked