Demo store: https://simple-business-plan-templates.myshopify.com/

Front end Password: baseum

Section code:

<div class="back-banner" style="background-image:url('{{section.settings.background-img | img_url:'master'}}')">
<div class="fx">

<div class="fx-lf">
<div class="left-part">
<h2 class="dropdown-heading">{{section.settings.titleleft }}</h2>
<div class="product-form__input product-form__input--dropdown">
<label class="form__label" for="Option-{{ section.id }}-{{ forloop.index0 }}">
{{ option.name }}
</label>
<div class="select">
<select id="Option-{{ section.id }}-{{ forloop.index0 }}"
class="select__select">
{% for product in collections.all.products limit: 100 %}

<option attr="{{product.url}}" class="{{product.title}}">{{product.title}}</option>

{% endfor %}
</select>
{% render 'icon-caret' %}
</div>
</div>

<h3>{{section.settings.subheading }}</h3>
<div><a class="button get-started" href="/products/adult-day-care-business-plan-template">{{section.settings.btntext }}</a></div>
<script>
$('select.select__select').on('change', function() {
// alert( this.value );
var Text = $(this).val();
Text = Text.toLowerCase().replace(' ','-');
Text = Text.replace(' ','-');
Text = Text.replace(' ','-');
Text = Text.replace(' ','-');
Text = Text.replace(' ','-');Text = Text.replace(' ','-');
Text = Text.replace(' ','-');
Text = Text.replace(' ','-');
Text = Text.replace(' ','-');
Text = Text.replace(' ','-');
Text = Text.replace(' ','-');Text = Text.replace(' ','-');
Text = Text.replace(' ','-');
$('.get-started').attr('href', '/products/' + Text);
});
</script>

<script>
// $("select.select__select").change(function () {
// var str = "";
// if(#("select option:selected").length === 3){
// $("select option:selected").each(function () {
// var id = $(this).parent().attr('name');
// str += $(this).attr('value');
// });
// $("div#output").text("mysite.com" + str);
// Or, if you want a clickable link and not just a URL:
// $(".left-part").append($("<a>").attr({href: "mysite.com" + str}).append("Click me"));
// }
// })
// .trigger('change');
</script>
<div class="prc">
<div class="price price-item price-item--regular banner-prc">
{% for product in collections.all.products %}
<div class="{%if forloop.index == 1 %}show_prod{%else%} hide_prod{%endif%}" >
<label>Regular Price: </label>{{ product.compare_at_price | money }}<br>
<label>Sale Price: </label> <span class="sale-prices">{{ product.price | money }}</span>
</div>
{% endfor %}
</div>
</div>
</div>
</div>

<div class="fx-rt video-part">
<div class="video-content">
{% if section.settings.style == 'image_with_play' %}
<div class="vid-image">
{% if section.settings.video_bg_image != blank %}
<div class="vid-image-wrap">
<div class="vd-img-wrp">
<img class="vd-back-img" src="{{ section.settings.video_bg_image | img_url:'master'}}">
</div>
<button id="play-video" type="button" class="btn video-control video-control__play" data-controls="Video-{{ section.id }}">
<img src="{{ 'Play_Icon.png' | asset_url}}">
</button>
</div>
{% endif %}
</div>

<div class="show-vid" style="display:none; position: relative;">
{% if section.settings.video_link contains 'youtube' %}
<iframe id="video" width="100%" height="525" src="https://www.youtube.com/embed/{{ section.settings.video_link.id }}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay=1; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
{% else %}
<video id="cusvideo" class="downloaded-video" style="max-width:100%;" controls="controls" src="{{section.settings.videocdnlink}}" width="100%" muted>
</video>
{% endif %}
</div>
{% endif %}
<div class="video-wrp">
<p class="video__title">{{section.settings.video_title}}</p>
</div>
</div>
</div>

</div>
</div>


<script>
$('#play-video').on('click', function(e) {
$('#cusvideo').get(0).play()
});
</script>

<script>

$(document).ready(function(){
$("#play-video").click(function(){
$(".vid-image").hide();
});
$("#play-video").click(function(){
$(".show-vid").show();
});
$("#close-video").click(function(){
$(".vid-image").show();
});
$("#close-video").click(function(){
$(".show-vid").hide();
});
});
</script>



{% schema %}
{
"name": "Top-sec",
"settings": [
{
"type":"image_picker",
"id":"background-img",
"label":"Background Banner"
},
{
"type":"header",
"content":"Left Part"
},
{
"type":"html",
"id":"titleleft",
"label":"Left Heading"
},
{
"type":"html",
"id":"subheading",
"label":"Sub Title"
},
{
"type":"html",
"id":"btntext",
"label":"Button Text"
},
{
"type":"header",
"content":"Right Part"
},
{
"type":"html",
"id":"video_title",
"label":"Video Title"
},
{
"id": "video_link",
"type": "video_url",
"label": "Youtube video URL",
"accept": ["youtube", "vimeo"],
"default": "https://www.youtube.com/watch?v=_9VUPq3SxOc",
"info": "Add Embeded video link here"
},
{
"type":"html",
"id":"videocdnlink",
"label":"Video cdn link"
},
{
"type": "select",
"id": "style",
"label":"Style",
"default": "background",
"options": [
{
"label":"Image with play button ",
"value": "image_with_play"
},
{
"label":"Background",
"value": "background"
}
]
},
{
"type":"image_picker",
"id":"video_bg_image",
"label":"Video Background Image"
}
],
"presets":[
{
"name":"Top-sec"
}
]
}
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}