CMS Development

Janette
Participant

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

SOLVE

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:

Home_Recursos_Videos.PNG

, 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:Plantilla_Home_Recursos_Videos.PNG

 

Plantilla_Home_Recursos_Videos_2.PNG

 

 

 

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

0 Upvotes
1 Accepted solution
lscanlan
Solution
HubSpot Alumni
HubSpot Alumni

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

SOLVE

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.

Leland Scanlan

HubSpot Developer Support

View solution in original post

2 Replies 2
lscanlan
Solution
HubSpot Alumni
HubSpot Alumni

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

SOLVE

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.

Leland Scanlan

HubSpot Developer Support
Janette
Participant

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

SOLVE

Thanks I can fixed it 😉

Regards

0 Upvotes