[Shopify] Prestige Theme - Add Content Overlay to Background Video

background-video.liquid

{%- capture section_settings -%}
{
  "videoType": {{ section.settings.video_url.type | json }},
  "videoId": {{ section.settings.video_url.id | json }},
  "requestHost": {{ request.host | json }}
}
{%- endcapture -%}

<section class="Section" id="section-{{ section.id }}" data-section-id="{{ section.id }}" data-section-type="background-video" data-section-settings='{{ section_settings }}'>
  <div class="ImageHero {% if section.settings.section_size != 'normal' %}ImageHero--{{ section.settings.section_size }}{% endif %}">
    <div class="ImageHero__VideoHolder"></div>
    {%- if section.settings.content_position != 'none' -%}
    <div class="Slideshow__Content Slideshow__Content--{{ section.settings.content_position }}">
    	{%- if section.settings.subheading != blank -%}
        	<h3 class="SectionHeader__SubHeading Heading u-h6">{{ section.settings.subheading | escape }}</h3>
            {%- endif -%}
            {%- if section.settings.title != blank -%}
              <h2 class="SectionHeader__Heading SectionHeader__Heading--emphasize Heading u-h1 video-header">{{ section.settings.title | escape }}</h2>
            {%- endif -%}
 			{%- if section.settings.button_1_text != blank -%}
              <a href="{{ section.settings.button_1_link }}" class="Button Button--secondary">{{ section.settings.button_1_text | escape }}</a>
    	{%- endif -%}
    </div>
    {%- endif -%}
  </div>
</section>

<style>
  #section-{{ section.id }} .Slideshow__Content {z-index: 5;}
  #section-{{ section.id }} .SectionHeader__SubHeading,
  #section-{{ section.id }} .SectionHeader__Heading,
  #section-{{ section.id }} .SectionHeader__ButtonWrapper,
  #section-{{ section.id }} .ButtonGroup,
  #section-{{ section.id }} .Button {
    color: {{ section.settings.text_color }};
    border-color: {{ section.settings.text_color }};
    z-index: 5;
    position: relative;
  }
  #section-{{ section.id }} .Button--secondary::before {
    background-color: {{ section.settings.button_hov_bg }};
  }
  #section-{{ section.id }} .Button:hover {
    color: {{ section.settings.button_hov_color }};
  }

</style>

{% schema %}
{
  "name": "Background video",
  "settings": [
    {
      "type": "paragraph",
      "content": "Background videos are automatically muted to allow autoplay on mobile. If you require audio, use the \"Featured Video\" section."
    },
	{
     "type": "select",
     "id": "content_position",
     "label": "Desktop content position",
     "options": [
       {
         "value": "none",
         "label": "Hide"
       },
       {
         "value": "middleLeft",
         "label": "Middle left"
       },
       {
         "value": "middleCenter",
         "label": "Middle center"
       },
       {
         "value": "middleRight",
         "label": "Middle right"
       },
       {
         "value": "bottomLeft",
         "label": "Bottom left"
       },
       {
         "value": "bottomCenter",
         "label": "Bottom center"
       },
       {
         "value": "bottomRight",
         "label": "Bottom right"
       }
       ],
          "default": "bottomLeft"
        },
        {
          "type": "header",
          "content": "Text and CTA"
        },
        {
          "type": "text",
          "id": "subheading",
          "label": "Sub-heading",
          "default": "Video Slide title"
        },
		{
          "type": "text",
          "id": "title",
          "label": "Heading",
          "default": "Tell your story"
        },
        {
          "type": "text",
          "id": "button_1_text",
          "label": "Text"
        },
        {
          "type": "url",
          "id": "button_1_link",
          "label": "Link"
        },
		{
      	"type": "color",
     	 "id": "text_color",
      	"label": "Text and Button Color",
     	 "default": "#ffffff"
   	 	},
		{
     	 "type": "color",
     	 "id": "button_hov_bg",
     	 "label": "Button Hover Background",
     	 "default": "#ffffff"
   		},
		{
      	"type": "color",
      	"id": "button_hov_color",
      	"label": "Button Hover Text Color",
      	"default": "#000000"
    	},
    	{
      "type": "header",
      "content": "Section Settings"
      },
      {
      "type": "select",
      "id": "section_size",
      "label": "Section size",
      "options": [
        {
          "value": "small",
          "label": "Small"
        },
        {
          "value": "normal",
          "label": "Normal"
        },
        {
          "value": "large",
          "label": "Large"
        }
      ],
      "default": "large"
    },
    {
      "type": "video_url",
      "accept": ["youtube", "vimeo"],
      "id": "video_url",
      "label": "Video URL",
      "default": "https://www.youtube.com/watch?v=_9VUPq3SxOc"
    }
  ],
  "presets": [
    {
      "category": "Video",
      "name": "Background video",
      "settings": {}
    }
  ]
}
{% endschema %}

There's a bug where the text is stacking on top of the transparent header when scrolling. Is there a way to solve this issue?

Thanks for adding this!

There's a bug where the text is stacking on top of the transparent header when scrolling. Is there a way to solve this issue?

Thanks for adding this!

If anyone else is having this problem.

In this section <style>, replace the z-index here:

change it from z-index: 5; to z-index: 1; and all your problems should be solved!

One problem I've had was the use of youtube.com/embed/ link wasn't acceptable and was the only way to make the video play on IOS13 devices.

I have the same issue on mobile, the text and button are centered but at the bottom of the video instead of the center. Anybody can help ?

And it would be awesome to add the possibility to have an overlay to better read the text

I tried adding it as a new section first, but it didn't play the video. Overwriting my old background-video.liquid worked out in the end.