Changing strips video background based on time of day

Ask the community
,
1

I have a strip on my page that I want to display a different background depending on the time of day. I found an example of code that is supposed to work for images but the strip backgrounds I want to display are videos and it wasn’t working. Is this possible?

2

Hello Megan Sauer,

i don’t think that your intention ist possible.
https://www.wix.com/corvid/reference/$w.Style.html

Stripes are not in the listing.

3

Thanks, the one I found for changing images as strip backgrounds linked to this: https://www.wix.com/corvid/reference/$w.Background.html

but I’m not sure it works for video files.

4

May be you can put the strips in the container box and control the background color of the box.

5

As it states in the Background info.
…in certain elements.

The same with style as already mentioned above.

You can easily do it with your actual page background through Document
https://www.wix.com/corvid/reference/$w.Document.html

See here for example.
https://givemeawhisky.wixsite.com/stripbackground

Plus, in theory, you can do it on your site with a column strip video background changing at different times of the day or on an onMouse event handler for example.

However, even though it will work on your site in preview mode, it will not work on the published live site.

You can try it by adding two column strips to your page and setting them to have a standard video background from the Wix choice, then add this code below to your page and add the event handlers and test it.

It will work in preview but not in live as shown here where the two column strips shown will only show their originally chosen background and not change.
https://givemeawhisky.wixsite.com/stripbackground/strip

$w.onReady(function () {
});

const date = new Date();//Get the current Date
const hour = date.getHours();//We get the hour here (0-23)

if(hour <= 12){//Customize the hours according to your preference 
  $w("#columnStrip1").background.src = "wix:video://v1/11062b_9480d9d800bd4bda938057d5ac1ebc42/_#posterUri=11062b_9480d9d800bd4bda938057d5ac1ebc42f000.jpg&posterWidth=1920&posterHeight=1080";//Your morning video
}else {
  $w("#columnStrip1").background.src = "wix:video://v1/11062b_d013b164dadb47ec8e746ab178aacfbb/_#posterUri=11062b_d013b164dadb47ec8e746ab178aacfbbf000.jpg&posterWidth=1920&posterHeight=1080";//Your afternoon video
}                          

export function columnStrip1_mouseIn(event) {
  $w("#columnStrip1").background.src = "wix:video://v1/11062b_9480d9d800bd4bda938057d5ac1ebc42/_#posterUri=11062b_9480d9d800bd4bda938057d5ac1ebc42f000.jpg&posterWidth=1920&posterHeight=1080";//Your morning video
}

export function columnStrip1_mouseOut(event) {
  $w("#columnStrip1").background.src = "wix:video://v1/11062b_d013b164dadb47ec8e746ab178aacfbb/_#posterUri=11062b_d013b164dadb47ec8e746ab178aacfbbf000.jpg&posterWidth=1920&posterHeight=1080";
}
6

Hello!

How do I get this URL format: “wix:video://v1/11062b_9480d9d800bd4bda938057d5ac1ebc42/_#posterUri=11062b_9480d9d800bd4bda938057d5ac1ebc42f000.jpg&posterWidth=1920&posterHeight=1080” ; ??

7

Please open your own post and describe your issue in detail as most as possible…