Custom Video Background Opacity Toggle

[Diliyaer]

I'm working on a custom video background section in my Shopify (Dawn) theme where I want to add a colored overlay with adjustable opacity. The goal is to enhance the visibility of text placed on top of the video. But When I adjust the color and opacity values in the theme editor, nothing seems to change—the overlay remains unaffected. Could this be an issue because I'm working with a video background? Or is there something else in my setup that might be causing this problem?

Any insights or suggestions would be greatly appreciated!

Here is the code below:

{%- if section.blocks.size > 0 -%}
  {%- for block in section.blocks -%}
    {% if block.type == 'video' %}

      {%- comment %}
        Calculate the ratio based on the selected option (16:9 => 56.25%, 4:3 => 75%, 1:1 => 100%, 21:9 => ~42.857%, 1200×400 => ~33.3333%)
      {%- endcomment %}
      {% assign ratio_percent = 56.25 %}
      {% case block.settings.aspect_ratio %}
        {% when "16-9" %}
          {% assign ratio_percent = 56.25 %}
        {% when "4-3" %}
          {% assign ratio_percent = 75 %}
        {% when "1-1" %}
          {% assign ratio_percent = 100 %}
        {% when "21-9" %}
          {% assign ratio_percent = 42.857 %}
        {% when "1200-400" %}
          {% assign ratio_percent = 33.3333 %}
      {% endcase %}

      <div style="
        position: relative; 
        width: 100%; 
        height: 0; 
        padding-top: {{ ratio_percent }}%; 
        padding-bottom: 0; 
        margin: 0 auto;
      ">
        <!-- Overlay with color and opacity control -->
        <div style="
          position: absolute; 
          top: 0; left: 0; 
          width: 100%; height: 100%; 
          background-color: {{ block.settings.overlay_color }};
          opacity: {{ block.settings.overlay_opacity | divided_by: 100 }};
          z-index: 1;
        "></div>

        <!-- Video -->
        <video style="
          position: absolute; 
          top: 0; left: 0; 
          width: 100%; height: 100%; 
          object-fit: cover; 
          z-index: 0;
        "
        loop autoplay muted playsinline preload="none"
        poster="{{ block.settings.video_image | img_url: 'master' }}">
          <source src="{{ block.settings.video_link }}" type="video/mp4">
        </video>
      </div>

      <!-- Text and button -->
      <div style="text-align:center; margin-top: 20px; margin-bottom: 0;">
        {% if block.settings.title != blank %}
          <h1 style="color: {{ block.settings.color_text }};">{{ block.settings.title }}</h1>
        {% endif %}
        {% if block.settings.text != blank %}
          <div style="color: {{ block.settings.color_text }};">{{ block.settings.text }}</div>
        {% endif %}
        {% if block.settings.button_link != blank and block.settings.button_label != blank %}
          <a href="{{ block.settings.button_link }}"
             style="
               display:inline-block; 
               margin-top:10px; 
               padding:8px 15px; 
               background:{{ block.settings.color_btn_bg }}; 
               color:{{ block.settings.color_btn_text }}; 
               text-decoration:none; 
               font-weight:bold;
             ">
            {{ block.settings.button_label }}
          </a>
        {% endif %}
      </div>

    {% endif %}
  {%- endfor -%}
{%- else -%}
  <p style="text-align:center;">Aucun bloc vidéo ajouté.</p>
{%- endif -%}

{% schema %}
{
  "name": { "en": "Video Background" },
  "max_blocks": 1,
  "blocks": [
    {
      "type": "video",
      "name": "Video",
      "settings": [
        {
          "type": "url",
          "id": "video_link",
          "label": { "en": "Video link (MP4)" }
        },
        {
          "type": "image_picker",
          "id": "video_image",
          "label": { "en": "Cover image (poster)" }
        },
        {
          "type": "select",
          "id": "aspect_ratio",
          "label": { "en": "Aspect Ratio" },
          "options": [
            { "value": "16-9",    "label": "16:9 (Wide)" },
            { "value": "4-3",     "label": "4:3 (Classic)" },
            { "value": "1-1",     "label": "1:1 (Square)" },
            { "value": "21-9",    "label": "21:9 (Cinema)" },
            { "value": "1200-400","label": "1200×400 (3:1)" }
          ],
          "default": "16-9"
        },
        {
          "type": "range",
          "id": "overlay_opacity",
          "label": { "en": "Overlay opacity" },
          "min": 0,
          "max": 100,
          "step": 5,
          "unit": { "en": "%" },
          "default": 0
        },
        {
          "type": "color",
          "id": "overlay_color",
          "label": { "en": "Overlay Color" },
          "default": "#000000"
        },
        {
          "type": "color",
          "id": "color_text",
          "label": { "en": "Text color" },
          "default": "#ffffff"
        },
        {
          "type": "text",
          "id": "title",
          "label": { "en": "Title" },
          "default": "My Video"
        },
        {
          "type": "richtext",
          "id": "text",
          "label": { "en": "Description" },
          "default": {
            "en": "<p>This is my video description</p>"
          }
        },
        {
          "type": "text",
          "id": "button_label",
          "label": { "en": "Button label" }
        },
        {
          "type": "url",
          "id": "button_link",
          "label": { "en": "Button link" }
        },
        {
          "type": "color",
          "id": "color_btn_bg",
          "label": { "en": "Button background color" },
          "default": "#000000"
        },
        {
          "type": "color",
          "id": "color_btn_text",
          "label": { "en": "Button text color" },
          "default": "#ffffff"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": { "en": "Video Background" },
      "category": { "en": "Main" },
      "blocks": [
        { "type": "video" }
      ]
    }
  ]
}
{% endschema %}

[FrankyGiap]

Hi @Diliyaer ,

You can share with me your store url preview of this section? I can see more details about that

[Diliyaer]

Hey! yes, here is the preview link.
https://xhkc47p6q4f0jtmc-5646450757.shopifypreview.com

[FrankyGiap]

Hi @Diliyaer ,

In your code, please edit small thing as my screenshot:

By the way, if you can adjust value "block.settings.overlay_opacity", you can change to about 20 to see affect

[Diliyaer]

Hello @FrankyGiap , i did add the code, but id doesn't seem to work, am I adding it to the wrong place?

[FrankyGiap · Accepted solution]

Hi @Diliyaer , let use line "opacity: 0.2;" and "background-color: #000;" instead liquid code, you can see affect

[Diliyaer]

thank you it worked

[rajweb]

Hey @Diliyaer ,

Use rgba() instead of opacity: 

background-color: rgba({{ block.settings.overlay_color.red }}, {{ block.settings.overlay_color.green }}, {{ block.settings.overlay_color.blue }}, {{ block.settings.overlay_opacity | times: 0.01 }});

This ensures transparency applies only to the overlay, not its children.

If I was able to help you, please don't forget to Like and mark it as the Solution!

Best Regard,
Rajat

[Diliyaer]

hello @rajweb 

I adjusted the code, it didn't work, am I implementing the code incorrectly? 

[rajweb]

@Diliyaer ,

Ensure correct Liquid syntax for rgba()

Modify the overlay div like this:

<div style="
  position: absolute; 
  top: 0; left: 0; 
  width: 100%; height: 100%; 
  background-color: rgba({{ block.settings.overlay_color | remove: '#' | slice: 0,2 | hex_to_rgb }}, 
                         {{ block.settings.overlay_color | remove: '#' | slice: 2,2 | hex_to_rgb }}, 
                         {{ block.settings.overlay_color | remove: '#' | slice: 4,2 | hex_to_rgb }}, 
                         {{ block.settings.overlay_opacity | times: 0.01 }});
  z-index: 1;
"></div>