Autoplay Video on Homepage

[MAPDESIGNS]

Hello!

I would like a video on my homepage to autoplay when a customer lands on my website instead of having the play button to be clicked.

Can someone please help to provide me with the code that can do this and instructions on how I can add this code to my website please?

My theme is DAWN.

Many thanks,

Mira

[mrashid]

@MAPDESIGNS create new section and add this code 

<section class="video-section" style="background-color: {{ section.settings.background_color }}; padding-top: {{ section.settings.padding_top }}px; padding-bottom: {{ section.settings.padding_bottom }}px;">
  <div class="page-width video-content">
    {% if section.settings.video_link %}
      <div class="video-container">
        <video autoplay loop muted playsinline class="video-element" style="width: 100%; height: auto;">
          <source src="{{ section.settings.video_link | file_url }}">
          Your browser does not support the video tag.
        </video>
      </div>
    {% endif %}
    {% if section.settings.heading_text %}
      <h2 class="video-heading" style="color: {{ section.settings.heading_text_color }}; font-weight: {{ section.settings.heading_font_weight }}; text-align: {{ section.settings.text_alignment }};">
        {{ section.settings.heading_text }}
      </h2>
    {% endif %}
  </div>
</section>

{% schema %}
{
  "name": "Video Section",
  "settings": [
    {
      "type": "color",
      "id": "background_color",
      "label": "Background Color"
    },
    {
      "type": "range",
      "id": "padding_top",
      "label": "Padding Top",
      "min": 0,
      "max": 100,
      "default": 20,
      "unit": "px"
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "label": "Padding Bottom",
      "min": 0,
      "max": 100,
      "default": 20,
      "unit": "px"
    },
    {
      "type": "text",
      "id": "heading_text",
      "label": "Heading Text"
    },
    {
      "type": "color",
      "id": "heading_text_color",
      "label": "Heading Text Color"
    },
    {
      "type": "select",
      "id": "heading_font_weight",
      "label": "Heading Font Weight",
      "options": [
        { "value": "normal", "label": "Normal" },
        { "value": "bold", "label": "Bold" },
        { "value": "bolder", "label": "Bolder" },
        { "value": "lighter", "label": "Lighter" }
      ],
      "default": "normal"
    },
    {
      "type": "select",
      "id": "text_alignment",
      "label": "Text Alignment",
      "options": [
        { "value": "left", "label": "Left" },
        { "value": "center", "label": "Center" },
        { "value": "right", "label": "Right" }
      ],
      "default": "center"
    },
    {
      "type": "url",
      "id": "video_link",
      "label": "Video File Link"
    }
  ],
  "presets": [
    {
      "name": "Video Section",
      "category": "Custom Section"
    }
  ]
}
{% endschema %}

[MAPDESIGNS]

Hello Mrashid!

Thanks a lot for your help.

I completed the following steps but received a message that the code did not work.

Add Section > Custom Liquid > Liquid Code > Pasted your code in the text box.

Error message received: Liquid Syntax Error (Line 19): Unknown tag 'schema'

Did I do everything correctly?

Thanks,

MAP

[mrashid]

@MAPDESIGNS create section. open theme editor code

[mrashid]

@MAPDESIGNS 

If you’re not familiar with any specific parts of the changes, just let me know! I’ll guide you through the process or handle those aspects for you.

[MAPDESIGNS]

Yes please that will be great! 

How can I get in touch?

[mrashid]

message on whats app @MAPDESIGNS