Hi guys, I’m looking to add a color scheme to this section, so I can change its color. and to achieve a mobile look on the desktop view, which means the video above the text. Can anyone help me, if that is possible, please?
thank you.
@made4Uo @GemPages @PageFly-Victor @EBOOST @oscprofessional @LitCommerce @KetanKumar
{% for block in section.blocks %}
{% case block.type %}
{% when 'video' %}
{%- if block.settings.internal_video_url != blank or block.settings.internal_video_url_webm != blank -%}
{%- else -%}
{%- if block.settings.external_video_url.type == 'youtube' -%}
<iframe src="https://www.youtube.com/embed/{{ block.settings.external_video_url.id }}?enablejsapi=1{% if block.settings.enable_autoplay %}&autoplay=1&muted=1{% endif %}{% if block.settings.enable_loop %}&loop=1&playlist={{ block.settings.external_video_url.id }}{% endif %}{% if block.settings.enable_controls != true %}&controls=0{% endif %}" class="js-youtube" allowfullscreen="" style="aspect-ratio: {{ block.settings.upper_number | append: '/' | append: block.settings.lower_number }};
border-radius: {{block.settings.video_radius | append: 'px' }}"></iframe>
{%- else -%}
<iframe src="https://player.vimeo.com/video/{{ block.settings.external_video_url.id }}?{% if block.settings.enable_autoplay %}&autoplay=1&muted=1{% endif %}{% if block.settings.enable_loop %}&loop=1{% endif %}{% if block.settings.enable_controls != true %}&controls=0{% endif %}" class="js-vimeo" allowfullscreen="" style="aspect-ratio: {{ block.settings.upper_number | append: '/' | append: block.settings.lower_number }};
border-radius: {{block.settings.video_radius | append: 'px' }}"></iframe>
{%- endif -%}
{%- endif -%}
{% when "caption" %}
<small>{{block.settings.caption}}</small>
{% when "heading" %}
## {{block.settings.heading}}
{% when "content" %}
{{block.settings.content}}
{% when "button" %}
{% if block.settings.button_label != blank %}
{{block.settings.button_label}}
{% endif %}
{% endcase %}
{% endfor %}
{% schema %}
{
"name": "Video with text",
"settings": [
{
"type": "select",
"id": "video_placement",
"info": "Ony works with desktop",
"options": [
{
"value": "video-left",
"label": "video left"
},
{
"value": "video-right",
"label": "video right"
}
],
"default": "video-left",
"label": "Video placement in desktop"
},
{
"type": "select",
"id": "mobile_video_placement",
"info": "Ony works with tablet/mobile",
"options": [
{
"value": "column",
"label": "video top"
},
{
"value": "column-reverse",
"label": "video bottom"
}
],
"default": "column",
"label": "Video placement in mobile"
},
{
"type": "select",
"id": "content_alignment",
"options": [
{
"value": "center",
"label": "center"
},
{
"value": "left",
"label": "left"
},
{
"value": "right",
"label": "right"
}
],
"default": "center",
"label": "Content text alignment"
},
{
"type": "range",
"id": "video_margin",
"min": 0,
"max": 200,
"step": 5,
"default": 5,
"unit": "px",
"label": "Video left and right margin"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 150,
"step": 5,
"unit": "px",
"label": "Padding top",
"default": 30
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 150,
"step": 5,
"unit": "px",
"label": "Padding bottom",
"default": 30
}
],
"presets": [
{
"name": "Video with text",
"blocks": [
{
"type": "video"
},
{
"type": "heading"
},
{
"type": "caption"
},
{
"type": "button"
}
]
}
],
"blocks": [
{
"type": "video",
"name": "Video",
"limit": 1,
"settings": [
{
"type": "video_url",
"id": "external_video_url",
"accept": [
"youtube",
"vimeo"
],
"default": "https:\/\/youtu.be\/zGL2sBgBLoI",
"label": "External video url",
"placeholder": "https://youtu.be/zGL2sBgBLoI",
"info": "For external video, add the link and leave the internal video blank."
},
{
"type": "text",
"id": "internal_video_url",
"label": "Internal Video Url",
"info": "For internal video, add the link and leave the external video blank."
},
{
"type": "text",
"id": "internal_video_url_webm",
"label": "Internal Video Url WebM type",
"info": "For internal video, add the link and leave the external video blank."
},
{
"type": "image_picker",
"id": "image_poster",
"label": "Image poster, works with the internal source video only"
},
{
"type": "header",
"content": "Video ratio size",
"info": "This affects the width and height of the video. Use 1/1 if video is square, 8 / 6 for rectangle"
},
{
"type": "range",
"id": "upper_number",
"min": 0,
"max": 50,
"step": 1,
"label": "Video upper number",
"default": 24
},
{
"type": "range",
"id": "lower_number",
"min": 0,
"max": 50,
"step": 1,
"label": "Video lower number",
"default": 13
},
{
"type": "range",
"id": "video_radius",
"min": 0,
"max": 100,
"step": 1,
"default": 10,
"label": "Video frame radius"
},
{
"type": "header",
"content": "Video settings",
"info": "Note: If chooses autoplay, video is automatically muted, per web browser guideline [here](https:\/\/developer.chrome.com\/blog\/autoplay)"
},
{
"type": "checkbox",
"id": "enable_autoplay",
"default": true,
"label": "Enable autoplay"
},
{
"type": "checkbox",
"id": "enable_loop",
"default": true,
"label": "Enable looping"
},
{
"type": "checkbox",
"id": "enable_controls",
"default": true,
"label": "Enable controls"
}
]
},
{
"type": "heading",
"name": "heading",
"limit": 1,
"settings": [
{
"type": "text",
"id": "heading",
"default": "Video with text",
"label": "Text"
},
{
"type": "select",
"id": "heading_size",
"info": "Only works to Shopify 2.0 FREE themes",
"options": [
{
"value": "h2",
"label": "small"
},
{
"value": "h1",
"label": "medium"
},
{
"value": "h0",
"label": "large"
}
],
"default": "h1",
"label": "Heading size"
}
]
},
{
"type": "caption",
"name": "caption",
"limit": 1,
"settings": [
{
"type": "text",
"id": "caption",
"default": "Add a tagline",
"label": "caption"
},
{
"type": "select",
"id": "text_style",
"options": [
{
"value": "subtitle",
"label": "Subtitle"
},
{
"value": "uppercase",
"label": "Uppercase"
}
],
"default": "uppercase",
"label": "Caption"
}
]
},
{
"type": "content",
"name": "content",
"limit": 1,
"settings": [
{
"type": "richtext",
"id": "content",
"default": "
Pair text with a video to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.
",
"label": "richtext"
}
]
},
{
"type": "button",
"name": "button",
"limit": 1,
"settings": [
{
"type": "text",
"id": "button_label",
"default": "Button label",
"label": "Button label"
},
{
"type": "url",
"id": "button_link",
"label": "Button link"
},
{
"type": "select",
"id": "button_style",
"options": [
{
"value": "button-primary",
"label": "button primary"
},
{
"value": "button-secondary",
"label": "button secondary"
},
{
"value": "",
"label": "none"
}
],
"default": "button-primary",
"label": "Button style",
"info": "Button style depends on the theme used."
}
]
}
]
}
{% endschema %}
