dawn theme: add Color scheme setting to video with text section

[hamza-elkaissi1]

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 

<div class="videoTextContainer {{section.settings.video_placement}}"
style="padding-top: {{ section.settings.padding_top | append: "px" }};
padding-bottom: {{ section.settings.padding_bottom | append: "px" }};
--mobile-video-placement: {{ section.settings.mobile_video_placement }};
--video-margin: {{ section.settings.video_margin |append: "px" }};">
{% for block in section.blocks %}
{% case block.type %}
{% when 'video' %}
<div class="videoWrapper {% if section.settings.mobile_video_placement == "column" %}margin-bottom--desktop{% endif %}">
{%- if block.settings.internal_video_url != blank or block.settings.internal_video_url_webm != blank -%}
<video {% if block.settings.enable_loop %}loop{% endif %} playsinline {% if block.settings.enable_controls %}controls{% endif %} {% if block.settings.enable_autoplay %}autoplay muted{% endif %}
poster="{{ block.settings.image_poster | image_url }}"
style="aspect-ratio: {{ block.settings.upper_number | append: '/' | append: block.settings.lower_number }};
border-radius: {{block.settings.video_radius | append: 'px' }}">
{% if block.settings.internal_video_url_webm != blank %}
<source src="{{block.settings.internal_video_url_webm}}" type="video/mp4">
<source src="{{block.settings.internal_video_url_webm}}" type="video/webm">
{% else %}
<source src="{{block.settings.internal_video_url}}" type="video/mp4">
{% endif %}
Your browser is not supported to play the video!
</video>
{%- 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 -%}
</div>

<div class="textWrapper {{section.settings.content_alignment}} {{ block.settings.heading_size }} {% if section.settings.mobile_video_placement == "column-reverse" %}margin-bottom--mobile{% endif %}">
{% when "caption" %}
<small class="{{block.settings.text_style}}">{{block.settings.caption}}</small>
{% when "heading" %}
<h2 class="{{ block.settings.heading_size }}">{{block.settings.heading}}</h2>
{% when "content" %}
{{block.settings.content}}
{% when "button" %}
{% if block.settings.button_label != blank %}
<a href="{{block.settings.button_link}}"
class="videoTextButton button btn {% if block.settings.button_style == "button-primary" %}button-primary button--primary {% elsif block.settings.button_style == "button-secondary" %}button-secondary button--secondary{% endif %}">
{{block.settings.button_label}}</a>
{% endif %}
{% endcase %}
{% endfor %}
</div>
</div>
<style>
.videoTextContainer {
display: flex;
margin: 0 var(--video-margin);
}

.video-left {
flex-direction: row;
}

.video-left .textWrapper {
padding-left: 5%;
}

.video-right {
flex-direction: row-reverse;
}

.video-right .textWrapper {
padding-right: 5%;
}

.videoTextContainer > * {
width: 50%;
margin: auto;
}

.videoWrapper > * {
width: 100%;
border-radius: {{section.settings.video_radius | append: 'px' }};
border: none;
}

.videoTextButton {
width: max-content;
}

.textWrapper {
display: flex;
flex-direction: column;
}

.textWrapper > h2 {
margin: 0;
}

.center {
align-items: center;
}

.right {
align-items: flex-end;
}

.left {
align-items: flex-start;
}

.center p {
text-align: center;
}

.left p {
text-align: left;
}

.right p {
text-align: right;
}

.textWrapper .uppercase {
text-transform: uppercase;
letter-spacing: 2px;
margin: 1rem 0;
}
.margin-bottom--desktop {
margin-bottom: 1rem;
}

h2.h0 {
font-size: clamp(4rem, 2vw, 5.2rem);
}

h2.h1 {
font-size: clamp(3rem, 2vw, 4rem);
}

h2.h2 {
font-size: clamp(2rem, 2vw, 2.4rem);
}

@media only screen and (max-width: 749px) {
.videoTextContainer {
flex-direction: var(--mobile-video-placement);
margin: 0 5%;
}

.videoTextContainer > *{
width: 100%;
}

.video-right .textWrapper, .video-left .textWrapper {
padding: 0 !important;
}

.margin-bottom--mobile {
margin-bottom: 2rem;
}
}
</style>
{% 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": "<p>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.</p>",
"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 %}

[EBOOST · Accepted solution]

Hi @hamza-elkaissi1 

May I suggest code below

<div class="videoTextContainer {{section.settings.video_placement}}"
style="padding-top: {{ section.settings.padding_top | append: "px" }};padding-left: {{ section.settings.padding_top | append: "px" }};padding-right: {{ section.settings.padding_top | append: "px" }};
padding-bottom: {{ section.settings.padding_bottom | append: "px" }};
--mobile-video-placement: {{ section.settings.mobile_video_placement }};
--video-margin: {{ section.settings.video_margin |append: "px" }};background-color: {{ section.settings.background }}">
{% for block in section.blocks %}
{% case block.type %}
{% when 'video' %}
<div class="videoWrapper {% if section.settings.mobile_video_placement == "column" %}margin-bottom--desktop{% endif %}">
{%- if block.settings.internal_video_url != blank or block.settings.internal_video_url_webm != blank -%}
<video {% if block.settings.enable_loop %}loop{% endif %} playsinline {% if block.settings.enable_controls %}controls{% endif %} {% if block.settings.enable_autoplay %}autoplay muted{% endif %}
poster="{{ block.settings.image_poster | image_url }}"
style="aspect-ratio: {{ block.settings.upper_number | append: '/' | append: block.settings.lower_number }};
border-radius: {{block.settings.video_radius | append: 'px' }}">
{% if block.settings.internal_video_url_webm != blank %}
<source src="{{block.settings.internal_video_url_webm}}" type="video/mp4">
<source src="{{block.settings.internal_video_url_webm}}" type="video/webm">
{% else %}
<source src="{{block.settings.internal_video_url}}" type="video/mp4">
{% endif %}
Your browser is not supported to play the video!
</video>
{%- 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 -%}
</div>

<div class="textWrapper {{section.settings.content_alignment}} {{ block.settings.heading_size }} {% if section.settings.mobile_video_placement == "column-reverse" %}margin-bottom--mobile{% endif %}">
{% when "caption" %}
<small class="{{block.settings.text_style}}">{{block.settings.caption}}</small>
{% when "heading" %}
<h2 class="{{ block.settings.heading_size }}">{{block.settings.heading}}</h2>
{% when "content" %}
{{block.settings.content}}
{% when "button" %}
{% if block.settings.button_label != blank %}
<a href="{{block.settings.button_link}}"
class="videoTextButton button btn {% if block.settings.button_style == "button-primary" %}button-primary button--primary {% elsif block.settings.button_style == "button-secondary" %}button-secondary button--secondary{% endif %}">
{{block.settings.button_label}}</a>
{% endif %}
{% endcase %}
{% endfor %}
</div>
</div>
<style>
  .videoTextContainer * {
    box-sizing: border-box;
  }
.videoTextContainer {
  display: flex;
  margin: 0 var(--video-margin);
}
.video-left {
  flex-direction: column;
}
.video-left .textWrapper {
  padding-left: 5%;
}
.video-right {
  flex-direction: column-reverse;
}

.videoWrapper > * {
  width: 100%;
  border-radius: {{section.settings.video_radius | append: 'px' }};
  border: none;
}

.videoTextButton {
  width: max-content;
}

.textWrapper {
  display: flex;
  flex-direction: column;
}

.textWrapper > h2 {
  margin: 0;
}

.center {
  align-items: center;
}

.right {
  align-items: flex-end;
}

.left {
  align-items: flex-start;
}

.center p {
  text-align: center;
}

.left p {
  text-align: left;
}

.right p {
  text-align: right;
}

.textWrapper .uppercase {
  text-transform: uppercase;
  letter-spacing: 2px;
  margin: 1rem 0;
}
.margin-bottom--desktop {
  margin-bottom: 1rem;
}

h2.h0 {
  font-size: clamp(4rem, 2vw, 5.2rem);
}

h2.h1 {
  font-size: clamp(3rem, 2vw, 4rem);
}

h2.h2 {
  font-size: clamp(2rem, 2vw, 2.4rem);
}

@media only screen and (max-width: 749px) {
  .videoTextContainer {
    flex-direction: var(--mobile-video-placement);
    margin: 0 5%;
  }
  .video-right .textWrapper, .video-left .textWrapper {
    padding: 0 !important;
  }

  .margin-bottom--mobile {
    margin-bottom: 2rem;
  }
}
</style>
{% schema %}
{
    "name": "Video with text",
    "settings": [{
            "type": "color",
            "id": "background",
            "default": "#FFFFFF",
            "label": "Background"
        },
        {
            "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": "<p>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.</p>",
                "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 %}

[hamza-elkaissi1]

work super fine, thank you so much.

[Notagrownup]

Where did you place either code? I’ve tried in the base.css and the video-section.css but nothing changes on my website. 

[EBOOST]

Hi @Notagrownup ,

You need to create a section after that put code above to use.

[Notagrownup]

Thanks!!! One more question: How do I get the text and button overlay to disappear under the header like everything else when the user scrolls? It makes my drop down menu useless on mobile. 

[EBOOST]

Hi,

Could you share your store URL? I will help to take a look it.

[Notagrownup]

Http://notagrownup.net