Add second click button on top of video/picture (Streamline Theme)

Store Design
1

Hi, I would like to add a second clickable button on top of my video (next to the first button). I imagine I need to edit the HTML but I don’t know what the code should be. Can anyone help please?

2

@hclothing

Please share your vedio section file code i will check your code send solution for you.

Thanks!

3

Do you mean this?

{%- liquid
assign hero_text = false
if section.settings.title != blank or section.settings.subheading != blank or section.settings.link_text != blank
assign hero_text = true
endif
-%}

{%- style -%}
.hero–{{ section.id }} .hero__title {
font-size: {{ section.settings.title_size | times: 0.6 }}px;
}
@media only screen and (min-width: 769px) {
.hero–{{ section.id }} .hero__title {
font-size: {{ section.settings.title_size }}px;
}
}

{%- assign accent_exists = false -%}
{%- assign button_alpha = section.settings.color_accent | color_extract: ‘alpha’ -%}
{% unless button_alpha == 0.0 %}
{%- assign accent_exists = true -%}
.hero–{{ section.id }} .btn {
background: {{ section.settings.color_accent }} !important;
border-color: {{ section.settings.color_accent }} !important;

{%- assign accent_brightness = section.settings.color_accent | color_extract: ‘lightness’ -%}

{% if accent_brightness > 40 %}
color: #000 !important;
{% endif %}
}
{% endunless %}
{%- endstyle -%}

{%- if section.settings.video_url contains ‘YouTube’ -%}
{%- assign video_id = section.settings.video_url | split: ‘v=’ -%}
{%- assign video_id = video_id[1] | split: ‘&’ | first -%}

{%- endif -%}

{%- if section.settings.video_url contains ‘youtu.be/’ -%}
{%- assign video_id = section.settings.video_url | split: ‘.be/’ -%}
{%- assign video_id = video_id[1] | split: ‘&’ | first -%}

{%- endif -%}

{%- if section.settings.video_url contains ‘vimeo.com’ -%}
{%- assign video_id = section.settings.video_url | split: ‘.com/’ -%}
{%- assign video_id = video_id[1] | split: ‘/’ | first -%}

{%- endif -%}

{%- if section.settings.video_url contains ‘.mp4’ or section.settings.video_url contains ‘.MP4’ -%}

{%- endif -%}

{%- if section.settings.video_url contains ‘vimeo.com’ -%}



{%- endif -%}

{%- if hero_text -%}

{%- if section.settings.title != blank -%}

{{ section.settings.title | newline_to_br }}

{%- endif -%} {%- if section.settings.subheading != blank or section.settings.link_text != blank -%} {%- if section.settings.subheading != blank -%}
{{ section.settings.subheading | escape }}
{%- endif -%} {%- if section.settings.link_text != blank -%} {%- liquid assign link_href = section.settings.link if section.settings.link == blank assign link_href = section.settings.video_url endif -%} {%- endif -%} {%- endif -%}
{%- endif -%}

{% schema %}
{
“name”: “Video hero”,
“class”: “index-section–hero”,
“settings”: [
{
“type”: “textarea”,
“id”: “title”,
“label”: “Heading”,
“default”: “Bring your\nbrand to life.”
},
{
“type”: “range”,
“id”: “title_size”,
“label”: “Heading text size”,
“default”: 80,
“min”: 40,
“max”: 100,
“unit”: “px”
},
{
“type”: “text”,
“id”: “subheading”,
“label”: “Text”,
“default”: “Seamless auto-playing hero videos”
},
{
“type”: “text”,
“id”: “link_text”,
“label”: “Button text”
},
{
“type”: “url”,
“id”: “link”,
“label”: “Button link”,
“info”: “Links to YouTube videos will be opened in a video player”
},
{
“type”: “color”,
“id”: “color_accent”,
“label”: “Buttons”,
“default”: “rgba(0,0,0,0)”
},
{
“type”: “select”,
“id”: “text_align”,
“label”: “Text alignment”,
“default”: “vertical-center horizontal-center”,
“options”: [
{
“value”: “vertical-top horizontal-left”,
“label”: “Top left”
},
{
“value”: “vertical-top horizontal-center”,
“label”: “Top center”
},
{
“value”: “vertical-top horizontal-right”,
“label”: “Top right”
},
{
“value”: “vertical-center horizontal-left”,
“label”: “Center left”
},
{
“value”: “vertical-center horizontal-center”,
“label”: “Center”
},
{
“value”: “vertical-center horizontal-right”,
“label”: “Center right”
},
{
“value”: “vertical-bottom horizontal-left”,
“label”: “Bottom left”
},
{
“value”: “vertical-bottom horizontal-center”,
“label”: “Bottom center”
},
{
“value”: “vertical-bottom horizontal-right”,
“label”: “Bottom right”
}
]
},
{
“type”: “text”,
“id”: “video_url”,
“label”: “Video link”,
“default”: “https://www.youtube.com/watch?v=_9VUPq3SxOc”,
“info”: “Supports YouTube, .MP4 and Vimeo. Not all features supported by Vimeo. Learn more”
},
{
“type”: “select”,
“id”: “section_height”,
“label”: “Desktop height”,
“default”: “750px”,
“options”: [
{
“label”: “450px”,
“value”: “450px”
},
{
“label”: “550px”,
“value”: “550px”
},
{
“label”: “650px”,
“value”: “650px”
},
{
“label”: “750px”,
“value”: “750px”
},
{
“label”: “850px”,
“value”: “850px”
},
{
“label”: “Full screen”,
“value”: “100vh”
}
]
},
{
“type”: “select”,
“id”: “mobile_height”,
“label”: “Mobile height”,
“default”: “auto”,
“options”: [
{
“label”: “Auto”,
“value”: “auto”
},
{
“label”: “250px”,
“value”: “250px”
},
{
“label”: “300px”,
“value”: “300px”
},
{
“label”: “400px”,
“value”: “400px”
},
{
“label”: “500px”,
“value”: “500px”
},
{
“label”: “Full screen”,
“value”: “100vh”
}
]
}
],
“presets”: [{
“name”: “Video hero”,
“category”: “Video”
}]
}
{% endschema %}