I am currently using this custom video banner for my password-protected page. Can I add an email form to this section?
My website is: polarflaps.com
#video-container-{{section.id}}{ height: {{section.settings.desktop_height}}px; } .video-container { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; text-align: center; flex-direction: column; } .video-container .mobile-video{ display: none; } @media only screen and (max-width: 768px){ #video-container-{{section.id}}{ height: {{section.settings.mobile_height}}px; } .video-container .desktop-video{ display: none; } .video-container .mobile-video{ display: block; } } .video-container video{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 0; object-fit: cover; pointer-events: none; } .video-container .text-overlay{ z-index: 2; padding: 50px; } .video-container:after { content: ""; position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; transition: opacity .35s; background: rgba(0, 0, 0, 0.12); pointer-events: none; } .iframe-holder{ position: absolute; overflow: hidden; top: 50%; width: 100%; height: 100%; padding-top: 56.3%; transform: translateY(-50%); pointer-events: none; } .iframe-container{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .video-container .iframevideo{ position: absolute; top: -60px; left: 50%; width: 100%; height: calc(100% + 120px); transform: translate(-50%); } .video-container iframe{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } .placeholder-video{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 0; transition: opacity .3s; max-width: 100%; object-fit: cover; vertical-align: baseline; display: block; margin-right: auto; margin-left: auto; } .placeholder-video.video-played-hidden{ opacity: 0; pointer-events: none; } .text-overlay p, .text-overlay h2, .text-overlay h1, .text-overlay div{ color: white; text-align: center; } .text-overlay a{ } .text-overlay h2, .text-overlay h1{ margin: 0; margin-bottom: 1.25rem; margin-left: auto; margin-right: auto; } .text-overlay div.subheading{ font-size: .8em; font-weight: 500; letter-spacing: .1em; line-height: 1.3em; } .text-overlay p{ margin-top: 0; font-size: 1.35em; margin-bottom: 1em; max-width: 780px; text-align: center; margin-left: auto; margin-right: auto; } @media only screen and (max-width: 768px){ .text-overlay p{ font-size: 1.2em; } } .text-overlay a{ text-decoration: none; font-size: 1rem; letter-spacing: 0.1rem; padding: 14px 20px; margin: 10px .5em 0; vertical-align: middle; color: white; background-color: black; display: inline-block; height: auto; line-height: 18px; transition: background-color .1s; } .video-container.top-left { justify-content: flex-start; align-items: flex-start; } .video-container.top-center { justify-content: flex-start; align-items: center; text-align: center; } .video-container.top-right { justify-content: flex-start; align-items: flex-end; } .video-container.middle-left { justify-content: center; align-items: flex-start; } .video-container.middle-center { justify-content: center; align-items: center; text-align: center; } .video-container.middle-right { justify-content: center; align-items: flex-end; } .video-container.bottom-left { justify-content: flex-end; align-items: flex-start; } .video-container.bottom-center { justify-content: flex-end; align-items: center; text-align: center; } .video-container.bottom-right { justify-content: flex-end; align-items: flex-end; } .video-container svg{ width: 100%; height: 100%; position: absolute; fill: #9f9f9f; background: #c6c7c8; } .bottom-left .video-text, .bottom-left p, .top-left .video-text, .top-left p, .middle-left .video-text, .middle-left p{ text-align: left; } .bottom-right .video-text, .bottom-right p, .top-right .video-text, .top-right p, .middle-right .video-text, .middle-right p{ text-align: right; }
{%- if section.settings.video_url != blank -%}
{% assign youtube_url = section.settings.video_url %}
{%- if section.settings.image_placeholder != blank -%}
{{ section.settings.image_placeholder | image_url: width: 3200 | image_tag: class: 'placeholder-video', widths: '340, 480, 740, 980, 1200, 1400, 1600, 1920, 2560, 3200', sizes:"100vw" }}
{%- endif -%}
{%- elsif section.settings.video != blank and section.settings.video_mobile == blank -%}
{{ section.settings.video | video_tag: autoplay: true, loop: true, muted: true, controls: false }}
{%- elsif section.settings.video_mobile != blank and section.settings.video_mobile == blank -%}
{{ section.settings.video_mobile | video_tag: autoplay: true, loop: true, muted: true, controls: false }}
{%- elsif section.settings.video != blank and section.settings.video_mobile != blank -%}
{{ section.settings.video | video_tag: autoplay: true, loop: true, muted: true, controls: false, class:'desktop-video' }}
{{ section.settings.video_mobile | video_tag: autoplay: true, loop: true, muted: true, controls: false, class:'mobile-video' }}
{%- else -%}
{{ 'lifestyle-1' | placeholder_svg_tag }}
{%- endif -%}
{%- schema -%}
{
"name":"Video Banner",
"settings":[
{
"type":"video",
"id":"video",
"label":"Desktop video"
},
{
"type":"video",
"id":"video_mobile",
"label":"Mobile video"
},
{
"type":"header",
"content":"Youtube video"
},
{
"type":"text",
"id":"video_url",
"label":"Video URL",
"info":"Enter the URL of a YouTube video."
},
{
"type":"image_picker",
"id":"image_placeholder",
"label":"Place holder image"
},
{
"type":"text",
"id":"video-alt",
"label":"Video description"
},
{
"type":"header",
"content":"Position and dimensions"
},
{
"type":"select",
"id":"content_position",
"options":[
{
"value":"top-left",
"label":"Top Left"
},
{
"value":"top-center",
"label":"Top Center"
},
{
"value":"top-right",
"label":"Top Right"
},
{
"value":"middle-left",
"label":"Middle Left"
},
{
"value":"middle-center",
"label":"Middle Center"
},
{
"value":"middle-right",
"label":"Middle Right"
},
{
"value":"bottom-left",
"label":"Bottom Left"
},
{
"value":"bottom-center",
"label":"Bottom Center"
},
{
"value":"bottom-right",
"label":"Bottom Right"
}
],
"default":"middle-center",
"label":"Text Position"
},
{
"type":"range",
"id":"desktop_height",
"min":200,
"max":1000,
"step":20,
"unit":"px",
"label":"Desktop Height",
"default":600
},
{
"type":"range",
"id":"mobile_height",
"min":100,
"max":1000,
"step":20,
"unit":"px",
"label":"Mobile Height",
"default":500
}
],
"blocks":[
{
"type":"heading",
"name":"Heading",
"settings":[
{
"type":"text",
"id":"heading_text",
"label":"Heading Text",
"default":"Banner Video"
},
{
"type":"range",
"id":"desktop_width",
"min":100,
"max":1000,
"step":10,
"unit":"px",
"label":"Maximum desktop width",
"default":1000
},
{
"type":"range",
"id":"mobile_width",
"min":100,
"max":1000,
"step":10,
"unit":"px",
"label":"Maximum mobile width",
"default":400
},
{
"type":"range",
"id":"desktop_heading_size",
"min":20,
"max":150,
"step":2,
"unit":"px",
"label":"Desktop heading size",
"default":84
},
{
"type":"range",
"id":"mobile_heading_size",
"min":20,
"max":150,
"step":2,
"unit":"px",
"label":"Mobile heading size",
"default":32
},
{
"type": "checkbox",
"id": "h1_heading",
"label": "Set as an h1 heading",
"default": false
}
]
},
{
"type":"subheading",
"name":"Subheading",
"settings":[
{
"type":"text",
"id":"subheading_text",
"label":"Subheading Text",
"default":"YOUR SUBHEADING"
}
]
},
{
"type":"text",
"name":"Text",
"settings":[
{
"type":"richtext",
"id":"text_content",
"label":"Text Content",
"default":"
{%- for block in section.blocks -%}
{% case block.type %}
{%- when 'subheading' -%}
{{ block.settings.subheading_text }}
{%- when 'heading' -%}
#video-container-{{section.id}} .text-overlay h2,
#video-container-{{section.id}} .text-overlay h1{
font-size: {{ block.settings.desktop_heading_size }}px;
max-width: {{ block.settings.desktop_width }}px;
}
@media only screen and (max-width: 768px){
#video-container-{{section.id}} .text-overlay h2,
#video-container-{{section.id}} .text-overlay h1{
font-size: {{block.settings.mobile_heading_size}}px;
max-width: {{ block.settings.mobile_width }}px;
}
}
{%- if block.settings.h1_heading -%}
{{ block.settings.heading_text }}
{%- else -%}{{ block.settings.heading_text }}
{%- endif -%} {%- when 'text' -%} {{ block.settings.text_content }} {%- else -%} #video-container-{{section.id}} .text-overlay a{ color: {{ block.settings.button_text_color }}; background-color: {{ block.settings.button_bg_color }}; border-radius: {{ block.settings.button_radius }}px; font-size: {{ block.settings.font_size }}px; {% if block.settings.font_weight %}font-weight: bold;{% endif %} } #video-container-{{section.id}} .text-overlay a:hover{ background-color: {{ block.settings.button_bg_hover }}; } {% endcase %} {%- endfor -%}Your text goes here
" } ] }, { "type":"button", "name":"Button", "settings":[ { "type":"text", "id":"button_text", "label":"Button Text", "default":"CLICK HERE" }, { "type": "url", "id": "button_link", "label": "Button link", "default":"/" }, { "type":"color", "id":"button_text_color", "label":"Button Text Color", "default":"#ffffff" }, { "type":"color", "id":"button_bg_color", "label":"Button background color", "default":"#000000" }, { "type":"color", "id":"button_bg_hover", "label":"Button hover color", "default":"#232323" }, { "type":"range", "id":"button_radius", "min":0, "max":40, "step":2, "unit":"px", "label":"Corner radius", "default":0 }, { "type": "checkbox", "id": "font_weight", "label": "Make button text bold", "default": false }, { "type":"range", "id":"font_size", "min":0, "max":30, "step":1, "unit":"px", "label":"Button text size", "default":15 } ] } ], "presets":[ { "name":"Video Banner", "category":"Media", "blocks": [ { "type": "subheading" }, { "type": "heading" }, { "type": "text" }, { "type": "button" } ] } ] } {%- endschema -%}