Responsive Background video for widget area WordPress
- REFUNDED
Hi
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: https://jsfiddle.net/fa1tcz3k/
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.
Rempty answers:
Are you using an embed video (iframe) or are you uploading the video (mp4) ??
FYI..
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="HTML5Sample_H264.mov" />
<source src="HTML5Sample_Ogg.ogv" />
<source src="HTML5Sample_WebM.webm" />
</video>
</div>
<!--Here the text of the widget->
<div class="textover_bg">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porttitor, felis non fermentum bibendum.....
</div>
Now add this css:
.widget-1{
position: relative;
}
.video-background{
position: absolute;
width:100%!important;
height:auto!important;
top:0;
left:0;
z-index:1;
}
.textover_bg{
position: relative;
z-index:5;
}