Diferent video(HubL code) in one section of my Home

[Janette]

Hello good afternoon

I'm doing the re-design of the website and I'm working with the template that I will use for the home in which I have a section where I would like to see several background videos for each frame:

, but when adding the code in each module, it shows me the same video in each frame and I would like it to be a different one in each one but it does not respect the league of the different videos. My template is set up in the following way:

and the hubl code found in each module is as follows:

For boxes 1, 3, 6 and 8 I have this code:

{% image "background_image_1" label = 'Select Header background image 1',
src='https: //cdn2.hubspot.net/hubfs/491090/iNBest.Cloud-TemplateAlthea/2019/Home/GIF/Recurso_1.gif', no_wrapper = True,
export_to_template_context = True%}

<style>

.recurso {
background-image: url ("{{widget_data.background_image_1.src}}");
background-repeat: no-repeat;
background-position: center top;
background-attachment: scroll;
width: 300px;
height: 225px;
}
</ style>

And for tables 2, 4, 5 and 7 I have the following code:

{% image "background_image_2" label = 'Select Header background image 2',
src='https: //cdn2.hubspot.net/hubfs/491090/iNBest.Cloud-TemplateAlthea/2019/Home/Videos/Recursos/13581511.mp4', no_wrapper = True,
export_to_template_context = True%}

<style>

.recurso {
background-image: url ("{{widget_data.background_image_2.src}}");
background-repeat: no-repeat;
background-position: center top;
background-attachment: scroll;
width: 300px;
height: 225px;
}
</ style>

They are different videos and it shows me the same in the 8 pictures.
Is this wrong some arrangement in my template or is the code that I am using to deference each video wrong?

Can you help me with this to get a 2 different videos for the 8 frames please.

I remain attentive to your comments.
Regards

[lscanlan · Accepted solution]

Hi Janette,

Did you get this sorted yet? In case anyone comes across this in the future, it looks like you're creating a new CSS rule for each instance of the module. Each CSS rule was using the same selector:

.recurso

So because of the cascade, whichever module was added last, that's the CSS rule whose background-image value will be applied. Since Module 8 was using this URL: https://cdn2.hubspot.net/hubfs/491090/iNBest.Cloud-TemplateAlthea/2019/Home/GIF/Recurso_1.gif as its background-image value, that's likely why all 8 modules were getting that video displaying. Since it was coming last in the HTML, because of the CSS cascade it was the value that was applying (by over-ruling any of the previous declarations).

Let me know if you have any questions about what was happening here.

[Janette]

Thanks I can fixed it 😉

Regards