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_’, ‘’) %}
<div class=“inline-items{% if module.wrapper.text_align.lg %} inline-items--{{ module.wrapper.text_align.lg }}{% endif %}{% if module.wrapper.text_align.md %} inline-items--md-{{ module.wrapper.text_align.md }}{% endif %}{% if module.wrapper.text_align.sm %} inline-items--sm-{{ module.wrapper.text_align.sm }}{% endif %}”{% if module.button|length > 1 %} style=“gap: {{ module.settings.space }}px;”{% endif %}>
<div><div id=“vpop-{{name}}” data-type=“vimeo” data-id=“172052320” data-autoplay=‘true’ >
{%- 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 %}
<span class=“btn__icon btn__icon–{{ item.icon.icon_position }}”>
{% 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 %}
</span>
<style>
.btn--{{ module_id }}-{{ loop.index }} .btn__icon svg {
width: {{ (item.icon.icon_size / 100)|round(2) }}em;
}
</style>
{% endif %}
{{ item.text }}
{{ link_close_tag(item.link) }}
{%- if item.color == ‘custom-gradient’ -%}
<style>
.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);
}
</style>
{%- elif item.color == ‘custom-color’ -%}
<style>
.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);
}
</style>
{%- endif -%}
{%- else -%}
{%- cta guid=‘{{ item.cta }}’, no_wrapper=True -%}
{%- endif -%}
{%- endfor -%}
</div></div>
<div class=“video-popup-overlay”></div>
<div class=“video-popup-container”>
<div class=“video-popup-close”> 
</div>
<div class=“video-popup-iframe-container”>
<iframe class=“video-popup-iframe” src=“” width=“100%” height=“100%” frameborder=“0” allow=autoplay></iframe>
</div>
</div>
</div>
{% require_js %}
<script>
$(“#vpop-{{name}}”).on(‘click’, function(e) {
e.preventDefault();
$(“.video-popup-overlay,.video-popup-iframe-container,.video-popup-container,.video-popup-close”).show();
var srchref=‘’,autoplay=‘’,id=$(this).data(‘id’);
if($(this).data(‘type’) == ‘vimeo’) var srchref= “{{ module.url_vimeo.href }}”
else if($(this).data(‘type’) == ‘youtube’) var srchref=“YouTube”;
if($(this).data(‘autoplay’) == true) autoplay = ‘?autoplay=1’;
$(“.video-popup-iframe”).attr(‘src’, srchref+id+autoplay);
$(“.video-popup-iframe”).on(‘load’, function() {
$(“.video-popup-container”).show();
});
});
$(“.video-popup-close, .video-popup-overlay”).on(‘click’, function(e) {
$(“.video-popup-iframe-container,.video-popup-container,.video-popup-close,.video-popup-overlay”).hide();
$(“.video-popup-iframe”).attr(‘src’, ‘’);
});
</script>
{% end_require_js %}
Can you include a few additional details, please? What is the theme? And can you link to the pop-up video player you mentioned? It may be that this isn’t possible or needs a different approach. Or, hopefully, a community member will have some insight for us.