# Lightbox Video Button **URL:** \ **Category:** CMS Development\ **Created:** [October 3, 2022, 4:17pm UTC](https://community.hubspot.com/t/lightbox-video-button/66377 "2022-10-03T16:17:27Z")\ **Posts on this page:** 4\ **Page:** 1
**Author:** ![GBonner](https://avatars.discourse-cdn.com/v4/letter/g/9de0a6/32.png) [@GBonner](https://community.hubspot.com/u/GBonner)\ **Post date:** [October 3, 2022, 4:17pm UTC](https://community.hubspot.com/t/lightbox-video-button/66377/1 "2022-10-03T16:17:27Z")
Hi all, Not a developer but I’m trying to combine two modules, a button that came with a purchased theme and a popup video player i discovered here on the community. I have managed to get to a point where I can acheive the functionality on a singular button (with a vimeo embed as a module element), but when i add multiple instances of the module it causes issues on the editor page. Could anyone point me the right direction to be able to add a second button using the functionality that existed on the button module and link it to the URL within the .item as opposed to on a .module basis. The code I’m using is below: {% from ‘../../css/\_variables.css’ import sm, md, btn\_focus\_shadow %} {% from ‘../../macros/utility.html’ import module\_open\_tag, module\_close\_tag, link\_open\_tag, link\_close\_tag %} {% set module\_id = name|replace(‘module\_’, ‘’)|replace(‘widget\_’, ‘’) %} \
1 %} style=“gap: {{ module.settings.space }}px;”{% endif %}\> \\
{%- for item in module.button -%} {%- if item.type == ‘link’ -%} {{ link\_open\_tag(item.link, ‘btn btn--’ ~ item.fill ~ ’ btn--’ ~ item.size ~ ’ btn--’ ~ item.color ~ ’ btn--’ ~ item.shape ~ ’ ’ ~ item.link\_class ~ ’ btn--’ ~ module\_id ~ ‘-’ ~ loop.index, item.link\_onclick) }} {% if item.add\_icon and item.icon.icon.name %} \ {% icon name=‘{{ item.icon.icon.name }}’ style=‘{{ item.icon.icon.type or item.icon.icon.style }}’ unicode=‘{{ item.icon.icon.unicode }}’ icon\_set=‘{{ item.icon.icon.icon\_set }}’ no\_wrapper=True %} \ \ .btn--{{ module\_id }}-{{ loop.index }} .btn\_\_icon svg { width: {{ (item.icon.icon\_size / 100)|round(2) }}em; } \ {% endif %} {{ item.text }} {{ link\_close\_tag(item.link) }} {%- if item.color == ‘custom-gradient’ -%} \ .btn--{{ module\_id }}-{{ loop.index }}.btn--outline { border-color: {{ item.gradient\_fallback.color }}; color: {{ item.gradient\_fallback.color }}; } .btn--{{ module\_id }}-{{ loop.index }}.btn--fill, .btn--{{ module\_id }}-{{ loop.index }}.btn--outline:hover { background: {{ ‘linear-gradient(111.02deg, ‘~ item.gradient\_start.color ~’ 0%, ‘~ item.gradient\_end.color ~’ 100%)’ }}; color: {{ item.text\_color.color }}; } .btn--{{ module\_id }}-{{ loop.index }}:focus-visible:not(:hover):not(:active) { box-shadow: {{ btn\_focus\_shadow }} rgba({{ item.gradient\_fallback.color|default(‘#000000’)|convert\_rgb }}, .15); } \ {%- elif item.color == ‘custom-color’ -%} \ .btn--{{ module\_id }}-{{ loop.index }}.btn--outline { border-color: {{ item.solid\_color.color }}; color: {{ item.solid\_color.color }}; } .btn--{{ module\_id }}-{{ loop.index }}.btn--fill, .btn--{{ module\_id }}-{{ loop.index }}.btn--outline:hover { background: {{ item.solid\_color.color }}; color: {{ item.text\_color.color }}; } .btn--{{ module\_id }}-{{ loop.index }}:focus-visible:not(:hover):not(:active) { box-shadow: {{ btn\_focus\_shadow }} rgba({{ item.solid\_color.color|default(‘#000000’)|convert\_rgb }}, .15); } \ {%- endif -%} {%- else -%} {%- cta guid=‘{{ item.cta }}’, no\_wrapper=True -%} {%- endif -%} {%- endfor -%} \\ \
\ \
\
✖ \ \
\