Instantly share code, notes, and snippets.
Created
August 23, 2026 21:30
-
Star
0
(0)
You must be signed in to star a gist -
Fork
0
(0)
You must be signed in to fork a gist
-
-
Save dpw1/2346561b43812c111148f89792ee4234 to your computer and use it in GitHub Desktop.
Shopify video banner section. Copy and paste into any theme. No app. EZFY Code.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {% comment %} | |
| [[code_version:1.0.0]] | |
| {% endcomment %} | |
| <style> | |
| [id*="{{ section.id }}"] { | |
| margin-top: {{ section.settings.section_margin_top_desktop }}px; | |
| margin-bottom: {{ section.settings.section_margin_bottom_desktop }}px; | |
| } | |
| {% if section.settings.use_custom_font %} | |
| [id*="{{ section.id }}"] { | |
| font-family: {{ section.settings.font_family.family }}, {{ section.settings.font_family.fallback_families }}; | |
| font-weight: {{ section.settings.font_family.weight }}; | |
| font-style: {{ section.settings.font_family.style }}; | |
| } | |
| {% endif %} | |
| .SJ-vb-1 { | |
| position: relative; | |
| width: 100%; | |
| overflow: hidden; | |
| } | |
| .SJ-vb-1__container { | |
| {% if section.settings.full_width_desktop %} | |
| max-width: 100%; | |
| {% else %} | |
| max-width: {{ section.settings.width_desktop }}px; | |
| {% endif %} | |
| margin: 0 auto; | |
| position: relative; | |
| } | |
| .SJ-vb-1__video-wrapper { | |
| position: relative; | |
| width: 100%; | |
| height: {{ section.settings.video_height_desktop }}vh; | |
| border-radius: {{ section.settings.video_border_radius }}px; | |
| overflow: hidden; | |
| min-height: 0; | |
| } | |
| .SJ-vb-1__video-wrapper::after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: {{ section.settings.overlay_color }}; | |
| opacity: .{{ section.settings.overlay_percentage }}; | |
| pointer-events: none; | |
| z-index: 1; | |
| } | |
| .SJ-vb-1__video { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| display: block; | |
| } | |
| .SJ-vb-1__content { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| display: flex; | |
| z-index: 2; | |
| padding: 40px; | |
| box-sizing: border-box; | |
| } | |
| .SJ-vb-1__content--topleft { | |
| align-items: flex-start; | |
| justify-content: flex-start; | |
| } | |
| .SJ-vb-1__content--topleft .SJ-vb-1__text-wrapper { | |
| text-align: left; | |
| } | |
| .SJ-vb-1__content--topleft .SJ-vb-1__buttons { | |
| justify-content: flex-start; | |
| } | |
| .SJ-vb-1__content--top { | |
| align-items: flex-start; | |
| justify-content: center; | |
| } | |
| .SJ-vb-1__content--top .SJ-vb-1__text-wrapper { | |
| text-align: center; | |
| } | |
| .SJ-vb-1__content--top .SJ-vb-1__buttons { | |
| justify-content: center; | |
| } | |
| .SJ-vb-1__content--topright { | |
| align-items: flex-start; | |
| justify-content: flex-end; | |
| } | |
| .SJ-vb-1__content--topright .SJ-vb-1__text-wrapper { | |
| text-align: right; | |
| } | |
| .SJ-vb-1__content--topright .SJ-vb-1__buttons { | |
| justify-content: flex-end; | |
| } | |
| .SJ-vb-1__content--middleleft { | |
| align-items: center; | |
| justify-content: flex-start; | |
| } | |
| .SJ-vb-1__content--middleleft .SJ-vb-1__text-wrapper { | |
| text-align: left; | |
| } | |
| .SJ-vb-1__content--middleleft .SJ-vb-1__buttons { | |
| justify-content: flex-start; | |
| } | |
| .SJ-vb-1__content--middle { | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .SJ-vb-1__content--middle .SJ-vb-1__text-wrapper { | |
| text-align: center; | |
| } | |
| .SJ-vb-1__content--middle .SJ-vb-1__buttons { | |
| justify-content: center; | |
| } | |
| .SJ-vb-1__content--middleright { | |
| align-items: center; | |
| justify-content: flex-end; | |
| } | |
| .SJ-vb-1__content--middleright .SJ-vb-1__text-wrapper { | |
| text-align: right; | |
| } | |
| .SJ-vb-1__content--middleright .SJ-vb-1__buttons { | |
| justify-content: flex-end; | |
| } | |
| .SJ-vb-1__content--bottomleft { | |
| align-items: flex-end; | |
| justify-content: flex-start; | |
| } | |
| .SJ-vb-1__content--bottomleft .SJ-vb-1__text-wrapper { | |
| text-align: left; | |
| } | |
| .SJ-vb-1__content--bottomleft .SJ-vb-1__buttons { | |
| justify-content: flex-start; | |
| } | |
| .SJ-vb-1__content--bottom { | |
| align-items: flex-end; | |
| justify-content: center; | |
| } | |
| .SJ-vb-1__content--bottom .SJ-vb-1__text-wrapper { | |
| text-align: center; | |
| } | |
| .SJ-vb-1__content--bottom .SJ-vb-1__buttons { | |
| justify-content: center; | |
| } | |
| .SJ-vb-1__content--bottomright { | |
| align-items: flex-end; | |
| justify-content: flex-end; | |
| } | |
| .SJ-vb-1__content--bottomright .SJ-vb-1__text-wrapper { | |
| text-align: right; | |
| } | |
| .SJ-vb-1__content--bottomright .SJ-vb-1__buttons { | |
| justify-content: flex-end; | |
| } | |
| .SJ-vb-1__text-wrapper { | |
| {% if section.settings.add_text_shadow_desktop %} | |
| text-shadow: 0 2px {{ section.settings.text_shadow_blur_desktop }}px {{ section.settings.text_shadow_color }}; | |
| {% endif %} | |
| } | |
| .SJ-vb-1__title { | |
| color: {{ section.settings.title_color }}; | |
| font-size: {{ section.settings.title_size_desktop }}px; | |
| margin: 0; | |
| margin-bottom: {{ section.settings.title_bottom_spacing }}px; | |
| line-height: 1.2; | |
| } | |
| .SJ-vb-1__subtitle { | |
| color: {{ section.settings.subtitle_color }}; | |
| font-size: {{ section.settings.subtitle_size_desktop }}px; | |
| margin: 0; | |
| margin-bottom: {{ section.settings.subtitle_bottom_spacing }}px; | |
| line-height: 1.4; | |
| } | |
| .SJ-vb-1__buttons { | |
| display: flex; | |
| gap: {{ section.settings.button_spacing }}px; | |
| flex-wrap: wrap; | |
| } | |
| .SJ-vb-1__button { | |
| display: inline-block; | |
| padding: 12px 30px; | |
| background-color: {{ section.settings.button_background_color }}; | |
| color: {{ section.settings.button_text_color }}; | |
| border: {{ section.settings.button_border_width }}px solid {{ section.settings.button_border_color }}; | |
| border-radius: {{ section.settings.button_border_radius }}px; | |
| text-decoration: none; | |
| transition: all 0.3s ease; | |
| cursor: pointer; | |
| font-size: {{ section.settings.button_font_size_desktop }}px; | |
| font-weight: 500; | |
| } | |
| .SJ-vb-1__button:hover { | |
| opacity: 0.85; | |
| transform: translateY(-2px); | |
| } | |
| .SJ-vb-1__button--disabled { | |
| opacity: 0.6; | |
| cursor: not-allowed; | |
| pointer-events: auto; | |
| } | |
| .SJ-vb-1__button--disabled:hover { | |
| opacity: 0.6; | |
| transform: none; | |
| cursor: not-allowed; | |
| } | |
| .SJ-vb-1__play-button { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| z-index: 3; | |
| width: {{ section.settings.play_button_size_desktop }}px; | |
| height: {{ section.settings.play_button_size_desktop }}px; | |
| background-color: {{ section.settings.play_button_background_color }}; | |
| border-radius: {{ section.settings.play_button_border_radius }}px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| {% if section.settings.autoplay %} | |
| display: none; | |
| {% endif %} | |
| } | |
| .SJ-vb-1__play-button:hover { | |
| transform: translate(-50%, -50%) scale(1.1); | |
| } | |
| .SJ-vb-1__play-button svg { | |
| width: 40%; | |
| height: 40%; | |
| fill: {{ section.settings.play_button_color }}; | |
| margin-left: 5%; | |
| } | |
| .SJ-vb-1__play-button.SJ-vb-1__play-button--hidden { | |
| display: none; | |
| } | |
| /* Mobile Styles */ | |
| @media (max-width: 749px) { | |
| [id*="{{ section.id }}"] { | |
| margin-top: {{ section.settings.section_margin_top_mobile }}px; | |
| margin-bottom: {{ section.settings.section_margin_bottom_mobile }}px; | |
| } | |
| .SJ-vb-1__container { | |
| {% if section.settings.full_width_mobile %} | |
| max-width: 100%; | |
| {% else %} | |
| max-width: {{ section.settings.width_mobile }}px; | |
| {% endif %} | |
| } | |
| .SJ-vb-1__video-wrapper { | |
| border-radius: {{ section.settings.video_border_radius }}px; | |
| height: {{ section.settings.video_height_mobile }}vh; | |
| min-height: 0; | |
| } | |
| .SJ-vb-1__content { | |
| padding: 20px; | |
| } | |
| .SJ-vb-1__content--mobile-topleft { | |
| align-items: flex-start !important; | |
| justify-content: flex-start !important; | |
| } | |
| .SJ-vb-1__content--mobile-topleft .SJ-vb-1__text-wrapper { | |
| text-align: left !important; | |
| } | |
| .SJ-vb-1__content--mobile-topleft .SJ-vb-1__buttons { | |
| justify-content: flex-start !important; | |
| } | |
| .SJ-vb-1__content--mobile-top { | |
| align-items: flex-start !important; | |
| justify-content: center !important; | |
| } | |
| .SJ-vb-1__content--mobile-top .SJ-vb-1__text-wrapper { | |
| text-align: center !important; | |
| } | |
| .SJ-vb-1__content--mobile-top .SJ-vb-1__buttons { | |
| justify-content: center !important; | |
| } | |
| .SJ-vb-1__content--mobile-topright { | |
| align-items: flex-start !important; | |
| justify-content: flex-end !important; | |
| } | |
| .SJ-vb-1__content--mobile-topright .SJ-vb-1__text-wrapper { | |
| text-align: right !important; | |
| } | |
| .SJ-vb-1__content--mobile-topright .SJ-vb-1__buttons { | |
| justify-content: flex-end !important; | |
| } | |
| .SJ-vb-1__content--mobile-middleleft { | |
| align-items: center !important; | |
| justify-content: flex-start !important; | |
| } | |
| .SJ-vb-1__content--mobile-middleleft .SJ-vb-1__text-wrapper { | |
| text-align: left !important; | |
| } | |
| .SJ-vb-1__content--mobile-middleleft .SJ-vb-1__buttons { | |
| justify-content: flex-start !important; | |
| } | |
| .SJ-vb-1__content--mobile-middle { | |
| align-items: center !important; | |
| justify-content: center !important; | |
| } | |
| .SJ-vb-1__content--mobile-middle .SJ-vb-1__text-wrapper { | |
| text-align: center !important; | |
| } | |
| .SJ-vb-1__content--mobile-middle .SJ-vb-1__buttons { | |
| justify-content: center !important; | |
| } | |
| .SJ-vb-1__content--mobile-middleright { | |
| align-items: center !important; | |
| justify-content: flex-end !important; | |
| } | |
| .SJ-vb-1__content--mobile-middleright .SJ-vb-1__text-wrapper { | |
| text-align: right !important; | |
| } | |
| .SJ-vb-1__content--mobile-middleright .SJ-vb-1__buttons { | |
| justify-content: flex-end !important; | |
| } | |
| .SJ-vb-1__content--mobile-bottomleft { | |
| align-items: flex-end !important; | |
| justify-content: flex-start !important; | |
| } | |
| .SJ-vb-1__content--mobile-bottomleft .SJ-vb-1__text-wrapper { | |
| text-align: left !important; | |
| } | |
| .SJ-vb-1__content--mobile-bottomleft .SJ-vb-1__buttons { | |
| justify-content: flex-start !important; | |
| } | |
| .SJ-vb-1__content--mobile-bottom { | |
| align-items: flex-end !important; | |
| justify-content: center !important; | |
| } | |
| .SJ-vb-1__content--mobile-bottom .SJ-vb-1__text-wrapper { | |
| text-align: center !important; | |
| } | |
| .SJ-vb-1__content--mobile-bottom .SJ-vb-1__buttons { | |
| justify-content: center !important; | |
| } | |
| .SJ-vb-1__content--mobile-bottomright { | |
| align-items: flex-end !important; | |
| justify-content: flex-end !important; | |
| } | |
| .SJ-vb-1__content--mobile-bottomright .SJ-vb-1__text-wrapper { | |
| text-align: right !important; | |
| } | |
| .SJ-vb-1__content--mobile-bottomright .SJ-vb-1__buttons { | |
| justify-content: flex-end !important; | |
| } | |
| .SJ-vb-1__text-wrapper { | |
| {% if section.settings.add_text_shadow_mobile %} | |
| text-shadow: 0 2px {{ section.settings.text_shadow_blur_mobile }}px {{ section.settings.text_shadow_color }}; | |
| {% endif %} | |
| } | |
| .SJ-vb-1__title { | |
| font-size: {{ section.settings.title_size_mobile }}px; | |
| } | |
| .SJ-vb-1__subtitle { | |
| font-size: {{ section.settings.subtitle_size_mobile }}px; | |
| } | |
| .SJ-vb-1__play-button { | |
| width: {{ section.settings.play_button_size_mobile }}px; | |
| height: {{ section.settings.play_button_size_mobile }}px; | |
| } | |
| .SJ-vb-1__buttons { | |
| flex-direction: column; | |
| align-items: stretch; | |
| } | |
| .SJ-vb-1__button { | |
| text-align: center; | |
| font-size: {{ section.settings.button_font_size_mobile }}px; | |
| } | |
| } | |
| </style> | |
| <section class="SJ-vb-1" id="SJ-vb-1-{{ section.id }}"> | |
| <div class="SJ-vb-1__container"> | |
| <div class="SJ-vb-1__video-wrapper"> | |
| <video | |
| class="SJ-vb-1__video" | |
| data-video-desktop="{{ section.settings.video_url_desktop }}" | |
| data-video-mobile="{{ section.settings.video_url_mobile | default: section.settings.video_url_desktop }}" | |
| {% if section.settings.autoplay %} | |
| autoplay | |
| muted | |
| playsinline | |
| {% endif %} | |
| loop | |
| preload="none" | |
| data-lazy-load="true" | |
| > | |
| Your browser does not support the video tag. | |
| </video> | |
| {% unless section.settings.autoplay %} | |
| <div class="SJ-vb-1__play-button" data-play-button> | |
| <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> | |
| <path d="M8 5v14l11-7z"/> | |
| </svg> | |
| </div> | |
| {% endunless %} | |
| <div class="SJ-vb-1__content SJ-vb-1__content--{{ section.settings.text_alignment_desktop | replace: '-', '' }} SJ-vb-1__content--mobile-{{ section.settings.text_alignment_mobile | replace: '-', '' }}"> | |
| <div class="SJ-vb-1__text-wrapper"> | |
| {% if section.settings.title != blank %} | |
| <h2 class="SJ-vb-1__title">{{ section.settings.title }}</h2> | |
| {% endif %} | |
| {% if section.settings.subtitle != blank %} | |
| <p class="SJ-vb-1__subtitle">{{ section.settings.subtitle }}</p> | |
| {% endif %} | |
| <div class="SJ-vb-1__buttons"> | |
| {% if section.settings.button_1_text != blank %} | |
| {% if section.settings.button_1_url != blank %} | |
| <a href="{{ section.settings.button_1_url }}" class="SJ-vb-1__button"> | |
| {{ section.settings.button_1_text }} | |
| </a> | |
| {% else %} | |
| <span class="SJ-vb-1__button SJ-vb-1__button--disabled"> | |
| {{ section.settings.button_1_text }} | |
| </span> | |
| {% endif %} | |
| {% endif %} | |
| {% if section.settings.button_2_text != blank %} | |
| {% if section.settings.button_2_url != blank %} | |
| <a href="{{ section.settings.button_2_url }}" class="SJ-vb-1__button SJ-vb-1__button--secondary"> | |
| {{ section.settings.button_2_text }} | |
| </a> | |
| {% else %} | |
| <span class="SJ-vb-1__button SJ-vb-1__button--secondary SJ-vb-1__button--disabled"> | |
| {{ section.settings.button_2_text }} | |
| </span> | |
| {% endif %} | |
| {% endif %} | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <script> | |
| var sectionID = `{{ section.id }}`; | |
| window[sectionID] = window[sectionID] || {}; | |
| window[sectionID] = (function () { | |
| function waitForElement(selector, delay = 50, tries = 100) { | |
| const element = document.querySelector(selector); | |
| if (!window[`__${selector}`]) { | |
| window[`__${selector}`] = 0; | |
| window[`__${selector}__delay`] = delay; | |
| window[`__${selector}__tries`] = tries; | |
| } | |
| function _search() { | |
| return new Promise((resolve) => { | |
| window[`__${selector}`]++; | |
| setTimeout(resolve, window[`__${selector}__delay`]); | |
| }); | |
| } | |
| if (element === null) { | |
| if (window[`__${selector}`] >= window[`__${selector}__tries`]) { | |
| window[`__${selector}`] = 0; | |
| return Promise.resolve(null); | |
| } | |
| return _search().then(() => waitForElement(selector)); | |
| } else { | |
| return Promise.resolve(element); | |
| } | |
| } | |
| function lazyLoadVideo() { | |
| const videoWrapper = document.querySelector(`#SJ-vb-1-{{ section.id }} .SJ-vb-1__video-wrapper`); | |
| const video = document.querySelector(`#SJ-vb-1-{{ section.id }} .SJ-vb-1__video`); | |
| if (!video || !videoWrapper) return; | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting && video.dataset.lazyLoad === 'true') { | |
| const isMobile = window.innerWidth <= 749; | |
| const videoUrl = isMobile ? video.dataset.videoMobile : video.dataset.videoDesktop; | |
| if (videoUrl) { | |
| video.src = videoUrl; | |
| video.load(); | |
| video.dataset.lazyLoad = 'false'; | |
| {% if section.settings.autoplay %} | |
| video.play().catch(err => { | |
| console.log('Video autoplay failed:', err); | |
| }); | |
| {% endif %} | |
| } | |
| observer.unobserve(videoWrapper); | |
| } | |
| }); | |
| }, { | |
| rootMargin: '50px' | |
| }); | |
| observer.observe(videoWrapper); | |
| } | |
| function setupPlayButton() { | |
| const playButton = document.querySelector(`#SJ-vb-1-{{ section.id }} [data-play-button]`); | |
| const video = document.querySelector(`#SJ-vb-1-{{ section.id }} .SJ-vb-1__video`); | |
| if (!playButton || !video) return; | |
| playButton.addEventListener('click', function() { | |
| if (video.paused) { | |
| video.play(); | |
| playButton.classList.add('SJ-vb-1__play-button--hidden'); | |
| } | |
| }); | |
| video.addEventListener('pause', function() { | |
| if (!video.loop && video.currentTime === video.duration) return; | |
| playButton.classList.remove('SJ-vb-1__play-button--hidden'); | |
| }); | |
| video.addEventListener('play', function() { | |
| playButton.classList.add('SJ-vb-1__play-button--hidden'); | |
| }); | |
| } | |
| function handleResize() { | |
| const video = document.querySelector(`#SJ-vb-1-{{ section.id }} .SJ-vb-1__video`); | |
| if (!video || video.dataset.lazyLoad === 'true') return; | |
| const isMobile = window.innerWidth <= 749; | |
| const currentSrc = video.src; | |
| const desktopUrl = video.dataset.videoDesktop; | |
| const mobileUrl = video.dataset.videoMobile; | |
| const expectedUrl = isMobile ? mobileUrl : desktopUrl; | |
| if (expectedUrl && currentSrc !== expectedUrl) { | |
| const currentTime = video.currentTime; | |
| video.src = expectedUrl; | |
| video.load(); | |
| video.currentTime = currentTime; | |
| if (!video.paused) { | |
| video.play(); | |
| } | |
| } | |
| } | |
| let resizeTimeout; | |
| function debounceResize() { | |
| clearTimeout(resizeTimeout); | |
| resizeTimeout = setTimeout(handleResize, 250); | |
| } | |
| return { | |
| init: function () { | |
| document.addEventListener("DOMContentLoaded", function () { | |
| lazyLoadVideo(); | |
| setupPlayButton(); | |
| }); | |
| window.addEventListener("resize", debounceResize); | |
| window.addEventListener("load", function () { | |
| lazyLoadVideo(); | |
| setupPlayButton(); | |
| }); | |
| document.addEventListener("shopify:section:load", function(e) { | |
| if (e.detail.sectionId === sectionID) { | |
| setTimeout(() => { | |
| lazyLoadVideo(); | |
| setupPlayButton(); | |
| }, 100); | |
| } | |
| }); | |
| document.addEventListener("shopify:section:select", function(e) { | |
| if (e.detail.sectionId === sectionID) { | |
| const video = document.querySelector(`#SJ-vb-1-{{ section.id }} .SJ-vb-1__video`); | |
| if (video && !video.paused) { | |
| video.pause(); | |
| } | |
| } | |
| }); | |
| }, | |
| }; | |
| })(); | |
| window[sectionID].init(); | |
| </script> | |
| {% schema %} | |
| { | |
| "name": "SJ Video Banner", | |
| "tag": "section", | |
| "class": "section", | |
| "settings": [ | |
| { | |
| "type": "header", | |
| "content": "🎨 Font Settings" | |
| }, | |
| { | |
| "type": "checkbox", | |
| "id": "use_custom_font", | |
| "label": "Use custom font?", | |
| "info": "If unchecked, the section will use the website's current font. Enable this and pick a font below if you want a custom font.", | |
| "default": false | |
| }, | |
| { | |
| "type": "font_picker", | |
| "id": "font_family", | |
| "label": "Font family", | |
| "default": "helvetica_n4" | |
| }, | |
| { | |
| "type": "header", | |
| "content": "📝 Content" | |
| }, | |
| { | |
| "type": "text", | |
| "id": "title", | |
| "label": "Title", | |
| "default": "Discover Amazing Products" | |
| }, | |
| { | |
| "type": "text", | |
| "id": "subtitle", | |
| "label": "Subtitle", | |
| "default": "Shop our premium collection and elevate your style today" | |
| }, | |
| { | |
| "type": "paragraph", | |
| "content": "Button 1 Settings" | |
| }, | |
| { | |
| "type": "text", | |
| "id": "button_1_text", | |
| "label": "Button 1 Text", | |
| "default": "Shop Collection" | |
| }, | |
| { | |
| "type": "url", | |
| "id": "button_1_url", | |
| "label": "Button 1 URL" | |
| }, | |
| { | |
| "type": "paragraph", | |
| "content": "Button 2 Settings" | |
| }, | |
| { | |
| "type": "text", | |
| "id": "button_2_text", | |
| "label": "Button 2 Text", | |
| "default": "View Details" | |
| }, | |
| { | |
| "type": "url", | |
| "id": "button_2_url", | |
| "label": "Button 2 URL" | |
| }, | |
| { | |
| "type": "header", | |
| "content": "🎬 Video Settings" | |
| }, | |
| { | |
| "type": "paragraph", | |
| "content": "Desktop Video" | |
| }, | |
| { | |
| "type": "text", | |
| "id": "video_url_desktop", | |
| "label": "Video URL (Desktop)", | |
| "default": "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4", | |
| "info": "Add a direct link to your .mp4 video file. For best results, use a CDN or file hosting service. The video will be lazy loaded for better performance." | |
| }, | |
| { | |
| "type": "paragraph", | |
| "content": "Mobile Video" | |
| }, | |
| { | |
| "type": "text", | |
| "id": "video_url_mobile", | |
| "label": "Video URL (Mobile)", | |
| "info": "Add a mobile-optimized video (optional). If left empty, the desktop video will be used on mobile devices as well." | |
| }, | |
| { | |
| "type": "checkbox", | |
| "id": "autoplay", | |
| "label": "Video Autoplay", | |
| "default": true, | |
| "info": "⚠️ Important: Some browsers (especially on mobile devices) purposefully disable autoplay to save data and battery. This browser behavior cannot be overridden. Videos that autoplay will always be muted." | |
| }, | |
| { | |
| "type": "range", | |
| "id": "video_border_radius", | |
| "min": 0, | |
| "max": 50, | |
| "step": 1, | |
| "unit": "px", | |
| "label": "Video Border Radius", | |
| "default": 0 | |
| }, | |
| { | |
| "type": "header", | |
| "content": "📐 Dimensions" | |
| }, | |
| { | |
| "type": "paragraph", | |
| "content": "Desktop Dimensions" | |
| }, | |
| { | |
| "type": "checkbox", | |
| "id": "full_width_desktop", | |
| "label": "Full Width (Desktop)", | |
| "default": true | |
| }, | |
| { | |
| "type": "range", | |
| "id": "width_desktop", | |
| "min": 300, | |
| "max": 2000, | |
| "step": 20, | |
| "unit": "px", | |
| "label": "Custom Width (Desktop)", | |
| "default": 1200, | |
| "info": "Only applies when 'Full Width' is unchecked" | |
| }, | |
| { | |
| "type": "range", | |
| "id": "video_height_desktop", | |
| "min": 20, | |
| "max": 100, | |
| "step": 5, | |
| "unit": "%", | |
| "label": "Video Height (Desktop)", | |
| "default": 60, | |
| "info": "Height as percentage of viewport height" | |
| }, | |
| { | |
| "type": "select", | |
| "id": "aspect_ratio_desktop", | |
| "label": "Video Aspect Ratio (Desktop)", | |
| "options": [ | |
| { | |
| "value": "16/9", | |
| "label": "16:9 (Widescreen)" | |
| }, | |
| { | |
| "value": "21/9", | |
| "label": "21:9 (Ultrawide)" | |
| }, | |
| { | |
| "value": "4/3", | |
| "label": "4:3 (Standard)" | |
| }, | |
| { | |
| "value": "1/1", | |
| "label": "1:1 (Square)" | |
| }, | |
| { | |
| "value": "3/4", | |
| "label": "3:4 (Portrait)" | |
| }, | |
| { | |
| "value": "9/16", | |
| "label": "9:16 (Mobile Portrait)" | |
| } | |
| ], | |
| "default": "16/9" | |
| }, | |
| { | |
| "type": "paragraph", | |
| "content": "Mobile Dimensions" | |
| }, | |
| { | |
| "type": "checkbox", | |
| "id": "full_width_mobile", | |
| "label": "Full Width (Mobile)", | |
| "default": true | |
| }, | |
| { | |
| "type": "range", | |
| "id": "width_mobile", | |
| "min": 300, | |
| "max": 800, | |
| "step": 20, | |
| "unit": "px", | |
| "label": "Custom Width (Mobile)", | |
| "default": 400, | |
| "info": "Only applies when 'Full Width' is unchecked" | |
| }, | |
| { | |
| "type": "range", | |
| "id": "video_height_mobile", | |
| "min": 20, | |
| "max": 100, | |
| "step": 5, | |
| "unit": "%", | |
| "label": "Video Height (Mobile)", | |
| "default": 50, | |
| "info": "Height as percentage of viewport height" | |
| }, | |
| { | |
| "type": "select", | |
| "id": "aspect_ratio_mobile", | |
| "label": "Video Aspect Ratio (Mobile)", | |
| "options": [ | |
| { | |
| "value": "16/9", | |
| "label": "16:9 (Widescreen)" | |
| }, | |
| { | |
| "value": "4/3", | |
| "label": "4:3 (Standard)" | |
| }, | |
| { | |
| "value": "1/1", | |
| "label": "1:1 (Square)" | |
| }, | |
| { | |
| "value": "3/4", | |
| "label": "3:4 (Portrait)" | |
| }, | |
| { | |
| "value": "9/16", | |
| "label": "9:16 (Mobile Portrait)" | |
| } | |
| ], | |
| "default": "16/9" | |
| }, | |
| { | |
| "type": "header", | |
| "content": "🎭 Video Overlay" | |
| }, | |
| { | |
| "type": "range", | |
| "id": "overlay_percentage", | |
| "min": 0, | |
| "max": 100, | |
| "step": 5, | |
| "unit": "%", | |
| "label": "Overlay Opacity", | |
| "default": 20, | |
| "info": "Add a semi-transparent overlay to improve text readability" | |
| }, | |
| { | |
| "type": "color", | |
| "id": "overlay_color", | |
| "label": "Overlay Color", | |
| "default": "rgba(0, 0, 0, 0.3)" | |
| }, | |
| { | |
| "type": "header", | |
| "content": "🎨 Text Colors & Sizes" | |
| }, | |
| { | |
| "type": "paragraph", | |
| "content": "Title Settings" | |
| }, | |
| { | |
| "type": "color", | |
| "id": "title_color", | |
| "label": "Title Color", | |
| "default": "#ffffff" | |
| }, | |
| { | |
| "type": "range", | |
| "id": "title_size_desktop", | |
| "min": 16, | |
| "max": 120, | |
| "step": 2, | |
| "unit": "px", | |
| "label": "Title Size (Desktop)", | |
| "default": 48 | |
| }, | |
| { | |
| "type": "range", | |
| "id": "title_size_mobile", | |
| "min": 16, | |
| "max": 80, | |
| "step": 2, | |
| "unit": "px", | |
| "label": "Title Size (Mobile)", | |
| "default": 32 | |
| }, | |
| { | |
| "type": "range", | |
| "id": "title_bottom_spacing", | |
| "min": 0, | |
| "max": 60, | |
| "step": 2, | |
| "unit": "px", | |
| "label": "Title Bottom Spacing", | |
| "default": 16 | |
| }, | |
| { | |
| "type": "paragraph", | |
| "content": "Subtitle Settings" | |
| }, | |
| { | |
| "type": "color", | |
| "id": "subtitle_color", | |
| "label": "Subtitle Color", | |
| "default": "#f8f9fa" | |
| }, | |
| { | |
| "type": "range", | |
| "id": "subtitle_size_desktop", | |
| "min": 12, | |
| "max": 60, | |
| "step": 2, | |
| "unit": "px", | |
| "label": "Subtitle Size (Desktop)", | |
| "default": 20 | |
| }, | |
| { | |
| "type": "range", | |
| "id": "subtitle_size_mobile", | |
| "min": 12, | |
| "max": 40, | |
| "step": 2, | |
| "unit": "px", | |
| "label": "Subtitle Size (Mobile)", | |
| "default": 16 | |
| }, | |
| { | |
| "type": "range", | |
| "id": "subtitle_bottom_spacing", | |
| "min": 0, | |
| "max": 60, | |
| "step": 2, | |
| "unit": "px", | |
| "label": "Subtitle Bottom Spacing", | |
| "default": 24 | |
| }, | |
| { | |
| "type": "header", | |
| "content": "📍 Text Alignment" | |
| }, | |
| { | |
| "type": "select", | |
| "id": "text_alignment_desktop", | |
| "label": "Text Alignment (Desktop)", | |
| "options": [ | |
| { | |
| "value": "top-left", | |
| "label": "Top Left" | |
| }, | |
| { | |
| "value": "top", | |
| "label": "Top Center" | |
| }, | |
| { | |
| "value": "top-right", | |
| "label": "Top Right" | |
| }, | |
| { | |
| "value": "middle-left", | |
| "label": "Middle Left" | |
| }, | |
| { | |
| "value": "middle", | |
| "label": "Middle Center" | |
| }, | |
| { | |
| "value": "middle-right", | |
| "label": "Middle Right" | |
| }, | |
| { | |
| "value": "bottom-left", | |
| "label": "Bottom Left" | |
| }, | |
| { | |
| "value": "bottom", | |
| "label": "Bottom Center" | |
| }, | |
| { | |
| "value": "bottom-right", | |
| "label": "Bottom Right" | |
| } | |
| ], | |
| "default": "middle" | |
| }, | |
| { | |
| "type": "select", | |
| "id": "text_alignment_mobile", | |
| "label": "Text Alignment (Mobile)", | |
| "options": [ | |
| { | |
| "value": "top-left", | |
| "label": "Top Left" | |
| }, | |
| { | |
| "value": "top", | |
| "label": "Top Center" | |
| }, | |
| { | |
| "value": "top-right", | |
| "label": "Top Right" | |
| }, | |
| { | |
| "value": "middle-left", | |
| "label": "Middle Left" | |
| }, | |
| { | |
| "value": "middle", | |
| "label": "Middle Center" | |
| }, | |
| { | |
| "value": "middle-right", | |
| "label": "Middle Right" | |
| }, | |
| { | |
| "value": "bottom-left", | |
| "label": "Bottom Left" | |
| }, | |
| { | |
| "value": "bottom", | |
| "label": "Bottom Center" | |
| }, | |
| { | |
| "value": "bottom-right", | |
| "label": "Bottom Right" | |
| } | |
| ], | |
| "default": "middle" | |
| }, | |
| { | |
| "type": "paragraph", | |
| "content": "Text Shadow" | |
| }, | |
| { | |
| "type": "checkbox", | |
| "id": "add_text_shadow_desktop", | |
| "label": "Add Shadow Behind Text (Desktop)", | |
| "default": true, | |
| "info": "Makes readability easier depending on the background" | |
| }, | |
| { | |
| "type": "color", | |
| "id": "text_shadow_color", | |
| "label": "Text Shadow Color", | |
| "default": "rgba(0, 0, 0, 0.5)" | |
| }, | |
| { | |
| "type": "range", | |
| "id": "text_shadow_blur_desktop", | |
| "min": 0, | |
| "max": 20, | |
| "step": 1, | |
| "unit": "px", | |
| "label": "Text Shadow Blur (Desktop)", | |
| "default": 4 | |
| }, | |
| { | |
| "type": "checkbox", | |
| "id": "add_text_shadow_mobile", | |
| "label": "Add Shadow Behind Text (Mobile)", | |
| "default": true, | |
| "info": "Makes readability easier depending on the background" | |
| }, | |
| { | |
| "type": "range", | |
| "id": "text_shadow_blur_mobile", | |
| "min": 0, | |
| "max": 20, | |
| "step": 1, | |
| "unit": "px", | |
| "label": "Text Shadow Blur (Mobile)", | |
| "default": 4 | |
| }, | |
| { | |
| "type": "header", | |
| "content": "🔘 Button Styling" | |
| }, | |
| { | |
| "type": "color", | |
| "id": "button_background_color", | |
| "label": "Button Background Color", | |
| "default": "#ffffff" | |
| }, | |
| { | |
| "type": "color", | |
| "id": "button_text_color", | |
| "label": "Button Text Color", | |
| "default": "#000000" | |
| }, | |
| { | |
| "type": "color", | |
| "id": "button_border_color", | |
| "label": "Button Border Color", | |
| "default": "#ffffff" | |
| }, | |
| { | |
| "type": "range", | |
| "id": "button_border_width", | |
| "min": 0, | |
| "max": 10, | |
| "step": 1, | |
| "unit": "px", | |
| "label": "Button Border Width", | |
| "default": 2 | |
| }, | |
| { | |
| "type": "range", | |
| "id": "button_border_radius", | |
| "min": 0, | |
| "max": 50, | |
| "step": 1, | |
| "unit": "px", | |
| "label": "Button Border Radius", | |
| "default": 8 | |
| }, | |
| { | |
| "type": "range", | |
| "id": "button_font_size_desktop", | |
| "min": 12, | |
| "max": 24, | |
| "step": 1, | |
| "unit": "px", | |
| "label": "Button Font Size (Desktop)", | |
| "default": 16 | |
| }, | |
| { | |
| "type": "range", | |
| "id": "button_font_size_mobile", | |
| "min": 10, | |
| "max": 20, | |
| "step": 1, | |
| "unit": "px", | |
| "label": "Button Font Size (Mobile)", | |
| "default": 14 | |
| }, | |
| { | |
| "type": "range", | |
| "id": "button_spacing", | |
| "min": 0, | |
| "max": 50, | |
| "step": 1, | |
| "unit": "px", | |
| "label": "Space Between Buttons", | |
| "default": 20 | |
| }, | |
| { | |
| "type": "header", | |
| "content": "▶️ Play Button (Only visible when autoplay is off)" | |
| }, | |
| { | |
| "type": "color", | |
| "id": "play_button_color", | |
| "label": "Play Button Icon Color", | |
| "default": "#ffffff" | |
| }, | |
| { | |
| "type": "color", | |
| "id": "play_button_background_color", | |
| "label": "Play Button Background Color", | |
| "default": "rgba(0, 0, 0, 0.5)" | |
| }, | |
| { | |
| "type": "range", | |
| "id": "play_button_border_radius", | |
| "min": 0, | |
| "max": 100, | |
| "step": 1, | |
| "unit": "px", | |
| "label": "Play Button Border Radius", | |
| "default": 50, | |
| "info": "50px or higher creates a circular button" | |
| }, | |
| { | |
| "type": "range", | |
| "id": "play_button_size_desktop", | |
| "min": 40, | |
| "max": 200, | |
| "step": 10, | |
| "unit": "px", | |
| "label": "Play Button Size (Desktop)", | |
| "default": 80 | |
| }, | |
| { | |
| "type": "range", | |
| "id": "play_button_size_mobile", | |
| "min": 40, | |
| "max": 120, | |
| "step": 10, | |
| "unit": "px", | |
| "label": "Play Button Size (Mobile)", | |
| "default": 60 | |
| }, | |
| { | |
| "type": "header", | |
| "content": "📏 Section Spacing" | |
| }, | |
| { | |
| "type": "range", | |
| "id": "section_margin_top_desktop", | |
| "min": 0, | |
| "max": 200, | |
| "step": 5, | |
| "unit": "px", | |
| "label": "Section Margin Top (Desktop)", | |
| "default": 0 | |
| }, | |
| { | |
| "type": "range", | |
| "id": "section_margin_bottom_desktop", | |
| "min": 0, | |
| "max": 200, | |
| "step": 5, | |
| "unit": "px", | |
| "label": "Section Margin Bottom (Desktop)", | |
| "default": 0 | |
| }, | |
| { | |
| "type": "range", | |
| "id": "section_margin_top_mobile", | |
| "min": 0, | |
| "max": 200, | |
| "step": 5, | |
| "unit": "px", | |
| "label": "Section Margin Top (Mobile)", | |
| "default": 0 | |
| }, | |
| { | |
| "type": "range", | |
| "id": "section_margin_bottom_mobile", | |
| "min": 0, | |
| "max": 200, | |
| "step": 5, | |
| "unit": "px", | |
| "label": "Section Margin Bottom (Mobile)", | |
| "default": 0 | |
| } | |
| ], | |
| "presets": [ | |
| { | |
| "name": "SJ Video Banner" | |
| } | |
| ] | |
| } | |
| {% endschema %} | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment