Ask your WordPress questions! Pay money and get answers fast! (more info)

Responsive Background video for widget area



Need CSS or jQuery which enables the addition of a video to the background of a widget area.

dynamic_sidebar( 'widget-1', array(
'before' => '<div class="widget-1">',
'after' => '</div>',
) );

The widget area will be populated with a text widget where the text widget content floats over the video.

Answers (3)


Reigel Gallarde answers:

you can't make video background...

but you can however make a video position absolute and put it behind...

here's an html sample:

there are a lot of ways to achieve this, depending on what you have...

one I could think is to make something like:

dynamic_sidebar( 'widget-1', array(
'before' => '<div class="widget-1"><frame src="vidlink_here" /><div class="widget-content">',
'after' => '</div></div>',
) );

this will most likely create an html structure like that of the given link above...

dev4wp comments:

I need a working solution which covers the entire widget background and is responsive.


Arnav Joy answers:

see here you can find help


Rempty answers:

Are you using an embed video (iframe) or are you uploading the video (mp4) ??

Video backgrounds in mobile, tablets do not allow autoplay and will show the video with a play button in the middle. Don't use video background on mobile and replace it with a image background.

dev4wp comments:

I'm uploading it to the Media Library and then add it to a text widget.

Rempty comments:

Maybe you can do this
before the text in your widget add this

<div class="video-background">
<!--Here the code for your video, this is an example: -->
<video id="video" >
<source src="" />
<source src="HTML5Sample_Ogg.ogv" />
<source src="HTML5Sample_WebM.webm" />
<!--Here the text of the widget->
<div class="textover_bg">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porttitor, felis non fermentum bibendum.....

Now add this css:

position: relative;
position: absolute;
position: relative;