Where you can achieve what your competitors can’t

Autoplay Video on Homepage in Shopify

This custom code is completely free to use, but please note it does not include 1-on-1 technical support. If you need a bespoke, done-for-you solution to customize your Shopify store, my team is here to help! Head to my channel homepage and use the link in the trailer to reach out.

{%- comment -%}
<!-- Designed by ONHOW Studio - Anas El Medlaoui -->
{%- endcomment -%}

{%- liquid
  assign onhow_studio_desktop_src = ''
  assign onhow_studio_mobile_src = ''

  if section.settings.onhow_studio_desktop_video != blank
    for onhow_studio_source in section.settings.onhow_studio_desktop_video.sources
      if onhow_studio_source.mime_type == 'video/mp4'
        assign onhow_studio_desktop_src = onhow_studio_source.url
        break
      endif
    endfor
    if onhow_studio_desktop_src == '' and section.settings.onhow_studio_desktop_video.sources.size > 0
      assign onhow_studio_desktop_src = section.settings.onhow_studio_desktop_video.sources[0].url
    endif
  endif

  if section.settings.onhow_studio_mobile_video != blank
    for onhow_studio_source in section.settings.onhow_studio_mobile_video.sources
      if onhow_studio_source.mime_type == 'video/mp4'
        assign onhow_studio_mobile_src = onhow_studio_source.url
        break
      endif
    endfor
    if onhow_studio_mobile_src == '' and section.settings.onhow_studio_mobile_video.sources.size > 0
      assign onhow_studio_mobile_src = section.settings.onhow_studio_mobile_video.sources[0].url
    endif
  endif
-%}

<div class="onhow-studio-autoplay-video-wrapper onhow-studio-section-wrapper-{{ section.settings.onhow_studio_core_logic }}"
     id="onhow-studio-autoplay-video-{{ section.id }}">

  <div class="onhow-studio-autoplay-video-hero">

    <div class="onhow-studio-autoplay-video-video-wrap">
      <video
        class="onhow-studio-autoplay-video-video"
        id="onhow-studio-autoplay-video-el-{{ section.id }}"
        loop
        muted
        playsinline
        preload="none">
      </video>
    </div>

    <div class="onhow-studio-autoplay-video-overlay"></div>

    <div class="onhow-studio-autoplay-video-content">
      {%- if section.settings.onhow_studio_enable_content_box -%}
        <div class="onhow-studio-autoplay-video-content-bg"></div>
      {%- endif -%}

      {%- if section.settings.onhow_studio_title != blank -%}
        <h1 class="onhow-studio-autoplay-video-title">{{ section.settings.onhow_studio_title | escape }}</h1>
      {%- endif -%}

      {%- if section.settings.onhow_studio_text != blank -%}
        <div class="onhow-studio-autoplay-video-description">
          {{ section.settings.onhow_studio_text }}
        </div>
      {%- endif -%}

      {%- if section.settings.onhow_studio_button_link != blank and section.settings.onhow_studio_button_label != blank -%}
        <a href="{{ section.settings.onhow_studio_button_link }}" class="onhow-studio-autoplay-video-btn">
          {{ section.settings.onhow_studio_button_label | escape }}
        </a>
      {%- endif -%}
    </div>

  </div>
</div>

{%- style -%}
  {{ section.settings.onhow_studio_heading_font | font_face: font_display: 'swap' }}

  #shopify-section-{{ section.id }} {
    --onhow-studio-autoplay-video-heading-color: {{ section.settings.onhow_studio_color_heading }};
    --onhow-studio-autoplay-video-text-color: {{ section.settings.onhow_studio_color_text }};
    --onhow-studio-autoplay-video-btn-bg: {{ section.settings.onhow_studio_color_btn_bg }};
    --onhow-studio-autoplay-video-btn-text: {{ section.settings.onhow_studio_color_btn_text }};
    --onhow-studio-autoplay-video-btn-border-color: {{ section.settings.onhow_studio_button_border_color }};
    --onhow-studio-autoplay-video-btn-bg-opacity: {{ section.settings.onhow_studio_button_bg_opacity }};
    --onhow-studio-autoplay-video-btn-border-opacity: {{ section.settings.onhow_studio_button_border_opacity }};
    --onhow-studio-autoplay-video-heading-size: {{ section.settings.onhow_studio_heading_size }}rem;
    --onhow-studio-autoplay-video-mobile-heading-size: {{ section.settings.onhow_studio_mobile_heading_size }}rem;
    --onhow-studio-autoplay-video-letter-spacing: {{ section.settings.onhow_studio_letter_spacing }}px;
    --onhow-studio-autoplay-video-description-size: {{ section.settings.onhow_studio_description_size }}rem;
    --onhow-studio-autoplay-video-mobile-description-size: {{ section.settings.onhow_studio_mobile_description_size }}rem;
    --onhow-studio-autoplay-video-button-size: {{ section.settings.onhow_studio_button_size }}rem;
    --onhow-studio-autoplay-video-btn-min-width: {{ section.settings.onhow_studio_button_width }}px;
    --onhow-studio-autoplay-video-btn-min-height: {{ section.settings.onhow_studio_button_height }}px;
    --onhow-studio-autoplay-video-btn-radius: {{ section.settings.onhow_studio_button_radius }}px;
    --onhow-studio-autoplay-video-overlay-opacity: {{ section.settings.onhow_studio_overlay_opacity }};
    --onhow-studio-autoplay-video-video-blur: {{ section.settings.onhow_studio_video_blur }}px;
    --onhow-studio-autoplay-video-desktop-height: {{ section.settings.onhow_studio_desktop_height }}px;
    --onhow-studio-autoplay-video-mobile-height: {{ section.settings.onhow_studio_mobile_height }}px;
    --onhow-studio-autoplay-video-content-position: {{ section.settings.onhow_studio_content_position }}%;
    --onhow-studio-autoplay-video-heading-gap: {{ section.settings.onhow_studio_heading_gap }}px;
    --onhow-studio-autoplay-video-description-gap: {{ section.settings.onhow_studio_description_gap }}px;
    --onhow-studio-autoplay-video-content-box-color: {{ section.settings.onhow_studio_content_box_color }};
    --onhow-studio-autoplay-video-content-box-opacity: {{ section.settings.onhow_studio_content_box_opacity }};
    --onhow-studio-autoplay-video-heading-font: {{ section.settings.onhow_studio_heading_font.family }}, sans-serif;
    --onhow-studio-autoplay-video-heading-weight: {{ section.settings.onhow_studio_heading_font.weight }};
  }

  #shopify-section-{{ section.id }} * {
    box-sizing: border-box;
  }

  #shopify-section-{{ section.id }} p,
  #shopify-section-{{ section.id }} h1,
  #shopify-section-{{ section.id }} h2,
  #shopify-section-{{ section.id }} h3,
  #shopify-section-{{ section.id }} ul,
  #shopify-section-{{ section.id }} ol,
  #shopify-section-{{ section.id }} li {
    margin: 0;
    padding: 0;
  }

  .onhow-studio-autoplay-video-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
  }

  .onhow-studio-autoplay-video-hero {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    height: var(--onhow-studio-autoplay-video-desktop-height);
    overflow: hidden;
  }

  .onhow-studio-autoplay-video-video-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
  }

  .onhow-studio-autoplay-video-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(var(--onhow-studio-autoplay-video-video-blur));
  }

  .onhow-studio-autoplay-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: var(--onhow-studio-autoplay-video-overlay-opacity);
    z-index: 2;
    pointer-events: none;
  }

  .onhow-studio-autoplay-video-content {
    position: absolute;
    top: var(--onhow-studio-autoplay-video-content-position);
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 20px;
    text-align: center;
    z-index: 3;
    width: 100%;
    max-width: 900px;
  }

  .onhow-studio-autoplay-video-content-bg {
    position: absolute;
    inset: 0;
    background-color: var(--onhow-studio-autoplay-video-content-box-color);
    opacity: var(--onhow-studio-autoplay-video-content-box-opacity);
    border-radius: 8px;
    z-index: -1;
  }

  #shopify-section-{{ section.id }} .onhow-studio-autoplay-video-title {
    color: var(--onhow-studio-autoplay-video-heading-color);
    font-family: var(--onhow-studio-autoplay-video-heading-font);
    font-weight: var(--onhow-studio-autoplay-video-heading-weight);
    font-size: var(--onhow-studio-autoplay-video-heading-size);
    line-height: 1.2;
    letter-spacing: var(--onhow-studio-autoplay-video-letter-spacing);
    margin-bottom: var(--onhow-studio-autoplay-video-heading-gap);
  }

  .onhow-studio-autoplay-video-description {
    max-width: 600px;
    margin: 0 auto var(--onhow-studio-autoplay-video-description-gap);
  }

  .onhow-studio-autoplay-video-description p {
    color: var(--onhow-studio-autoplay-video-text-color);
    font-size: var(--onhow-studio-autoplay-video-description-size);
    line-height: 1.6;
    font-family: var(--font-body-family);
    font-weight: var(--font-body-weight);
    text-align: inherit;
  }

  .onhow-studio-autoplay-video-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: var(--onhow-studio-autoplay-video-button-size);
    font-weight: 500;
    font-family: var(--font-body-family);
    color: var(--onhow-studio-autoplay-video-btn-text);
    min-width: var(--onhow-studio-autoplay-video-btn-min-width);
    min-height: var(--onhow-studio-autoplay-video-btn-min-height);
    border-radius: var(--onhow-studio-autoplay-video-btn-radius);
    padding: 12px 30px;
    background: transparent;
    border: none;
    cursor: pointer;
    position: relative;
    z-index: 1;
    transition: opacity 0.3s ease;
  }

  .onhow-studio-autoplay-video-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--onhow-studio-autoplay-video-btn-bg);
    opacity: var(--onhow-studio-autoplay-video-btn-bg-opacity);
    border-radius: inherit;
    z-index: -1;
    transition: opacity 0.3s ease;
  }

  .onhow-studio-autoplay-video-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid var(--onhow-studio-autoplay-video-btn-border-color);
    opacity: var(--onhow-studio-autoplay-video-btn-border-opacity);
    border-radius: inherit;
    z-index: -1;
    transition: opacity 0.3s ease;
  }

  .onhow-studio-autoplay-video-btn:hover::before {
    opacity: calc(var(--onhow-studio-autoplay-video-btn-bg-opacity) * 0.8);
  }

  .onhow-studio-autoplay-video-btn:hover::after {
    opacity: calc(var(--onhow-studio-autoplay-video-btn-border-opacity) * 0.8);
  }

  @media screen and (max-width: 767px) {
    .onhow-studio-autoplay-video-hero {
      height: var(--onhow-studio-autoplay-video-mobile-height);
    }

    #shopify-section-{{ section.id }} .onhow-studio-autoplay-video-title {
      font-size: var(--onhow-studio-autoplay-video-mobile-heading-size);
    }

    .onhow-studio-autoplay-video-description p {
      font-size: var(--onhow-studio-autoplay-video-mobile-description-size);
    }

    .onhow-studio-autoplay-video-btn {
      padding: 10px 20px;
      font-size: calc(var(--onhow-studio-autoplay-video-button-size) * 0.8);
    }
  }
{%- endstyle -%}

<script>
  (function() {
    const onhowStudioCredit = atob("RGVzaWduZWQgYnkgT05IT1cgU3R1ZGlvIC0gU3Vic2NyaWJlIQ==");
    console.log(`%c ${onhowStudioCredit}`, 'background: #222; color: #00ff00; padding: 4px; border-radius: 4px;');

    const onhow_studio_section = document.getElementById('onhow-studio-autoplay-video-{{ section.id }}');
    if (!onhow_studio_section) return;

    const onhow_studio_video_el = onhow_studio_section.querySelector('#onhow-studio-autoplay-video-el-{{ section.id }}');
    if (!onhow_studio_video_el) return;

    const onhow_studio_desktop_src = '{{ onhow_studio_desktop_src }}';
    const onhow_studio_mobile_src = '{{ onhow_studio_mobile_src }}';

    function onhow_studio_init_video() {
      const onhow_studio_is_mobile = window.innerWidth <= 767;
      let onhow_studio_src = '';

      if (onhow_studio_is_mobile && onhow_studio_mobile_src !== '') {
        onhow_studio_src = onhow_studio_mobile_src;
      } else if (onhow_studio_desktop_src !== '') {
        onhow_studio_src = onhow_studio_desktop_src;
      } else if (onhow_studio_mobile_src !== '') {
        onhow_studio_src = onhow_studio_mobile_src;
      }

      if (onhow_studio_src === '') return;

      onhow_studio_video_el.src = onhow_studio_src;
      onhow_studio_video_el.load();
      onhow_studio_video_el.play().catch(function() {});
    }

    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', onhow_studio_init_video);
    } else {
      onhow_studio_init_video();
    }
  })();
</script>

{%- comment -%}
<!-- Designed by ONHOW Studio - Anas El Medlaoui -->
{%- endcomment -%}

{% schema %}
{
  "name": "Autoplay Video",
  "class": "onhow-studio-autoplay-video-section",
  "settings": [
    {
      "type": "header",
      "content": "✨ Built by ONHOW Studio"
    },
    {
      "type": "paragraph",
      "content": "Get free sections & tutorials at youtube.com/@ONHOWStudio"
    },
    {
      "type": "text",
      "id": "onhow_studio_core_logic",
      "label": "Section Architecture (Do Not Edit)",
      "default": "built-by-onhow-studio",
      "info": "Modifying this will break the section's CSS layout."
    },
    {
      "type": "header",
      "content": "― Video ―"
    },
    {
      "type": "video",
      "id": "onhow_studio_desktop_video",
      "label": "Desktop video"
    },
    {
      "type": "video",
      "id": "onhow_studio_mobile_video",
      "label": "Mobile video",
      "info": "Falls back to desktop video if left empty"
    },
    {
      "type": "range",
      "id": "onhow_studio_video_blur",
      "min": 0,
      "max": 20,
      "step": 1,
      "unit": "px",
      "label": "Video blur",
      "default": 0
    },
    {
      "type": "range",
      "id": "onhow_studio_overlay_opacity",
      "min": 0,
      "max": 1,
      "step": 0.1,
      "label": "Dark overlay opacity",
      "default": 0.3
    },
    {
      "type": "header",
      "content": "― Dimensions ―"
    },
    {
      "type": "range",
      "id": "onhow_studio_desktop_height",
      "min": 200,
      "max": 900,
      "step": 10,
      "unit": "px",
      "label": "Desktop height",
      "default": 600
    },
    {
      "type": "range",
      "id": "onhow_studio_mobile_height",
      "min": 150,
      "max": 700,
      "step": 10,
      "unit": "px",
      "label": "Mobile height",
      "default": 400
    },
    {
      "type": "header",
      "content": "― Layout ―"
    },
    {
      "type": "range",
      "id": "onhow_studio_content_position",
      "min": 10,
      "max": 90,
      "step": 1,
      "unit": "%",
      "label": "Content vertical position",
      "default": 50,
      "info": "50% = centered, lower values move content up, higher values move content down"
    },
    {
      "type": "range",
      "id": "onhow_studio_heading_gap",
      "min": 0,
      "max": 80,
      "step": 2,
      "unit": "px",
      "label": "Space between heading and description",
      "default": 20
    },
    {
      "type": "range",
      "id": "onhow_studio_description_gap",
      "min": 0,
      "max": 80,
      "step": 2,
      "unit": "px",
      "label": "Space between description and button",
      "default": 24
    },
    {
      "type": "header",
      "content": "― Content Box ―"
    },
    {
      "type": "checkbox",
      "id": "onhow_studio_enable_content_box",
      "label": "Enable content background box",
      "default": false
    },
    {
      "type": "color",
      "id": "onhow_studio_content_box_color",
      "label": "Content box color",
      "default": "#000000"
    },
    {
      "type": "range",
      "id": "onhow_studio_content_box_opacity",
      "min": 0,
      "max": 1,
      "step": 0.1,
      "label": "Content box opacity",
      "default": 0.5
    },
    {
      "type": "header",
      "content": "― Typography ―"
    },
    {
      "type": "font_picker",
      "id": "onhow_studio_heading_font",
      "label": "Heading font",
      "default": "helvetica_n4"
    },
    {
      "type": "text",
      "id": "onhow_studio_title",
      "label": "Heading",
      "default": "Video Background"
    },
    {
      "type": "range",
      "id": "onhow_studio_heading_size",
      "min": 2,
      "max": 6,
      "step": 0.1,
      "unit": "rem",
      "label": "Desktop heading size",
      "default": 3.8
    },
    {
      "type": "range",
      "id": "onhow_studio_mobile_heading_size",
      "min": 1.5,
      "max": 4,
      "step": 0.1,
      "unit": "rem",
      "label": "Mobile heading size",
      "default": 2.2
    },
    {
      "type": "range",
      "id": "onhow_studio_letter_spacing",
      "min": -5,
      "max": 20,
      "step": 0.5,
      "unit": "px",
      "label": "Heading letter spacing",
      "default": 0
    },
    {
      "type": "richtext",
      "id": "onhow_studio_text",
      "label": "Description",
      "default": "<p>Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.</p>"
    },
    {
      "type": "range",
      "id": "onhow_studio_description_size",
      "min": 0.8,
      "max": 2,
      "step": 0.1,
      "unit": "rem",
      "label": "Desktop description size",
      "default": 1.1
    },
    {
      "type": "range",
      "id": "onhow_studio_mobile_description_size",
      "min": 0.7,
      "max": 1.5,
      "step": 0.1,
      "unit": "rem",
      "label": "Mobile description size",
      "default": 1
    },
    {
      "type": "header",
      "content": "― Colors ―"
    },
    {
      "type": "color",
      "id": "onhow_studio_color_heading",
      "label": "Heading color",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "onhow_studio_color_text",
      "label": "Text color",
      "default": "#ffffff"
    },
    {
      "type": "header",
      "content": "― Button ―"
    },
    {
      "type": "text",
      "id": "onhow_studio_button_label",
      "label": "Button label"
    },
    {
      "type": "url",
      "id": "onhow_studio_button_link",
      "label": "Button link"
    },
    {
      "type": "range",
      "id": "onhow_studio_button_size",
      "min": 0.8,
      "max": 2,
      "step": 0.1,
      "unit": "rem",
      "label": "Button text size",
      "default": 1.1
    },
    {
      "type": "range",
      "id": "onhow_studio_button_width",
      "min": 100,
      "max": 500,
      "step": 10,
      "unit": "px",
      "label": "Button min-width",
      "default": 180
    },
    {
      "type": "range",
      "id": "onhow_studio_button_height",
      "min": 30,
      "max": 100,
      "step": 2,
      "unit": "px",
      "label": "Button min-height",
      "default": 50
    },
    {
      "type": "color",
      "id": "onhow_studio_color_btn_bg",
      "label": "Button background color",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "onhow_studio_color_btn_text",
      "label": "Button text color",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "onhow_studio_button_border_color",
      "label": "Button border color",
      "default": "#ffffff"
    },
    {
      "type": "range",
      "id": "onhow_studio_button_radius",
      "min": 0,
      "max": 40,
      "step": 2,
      "unit": "px",
      "label": "Button corner radius",
      "default": 4
    },
    {
      "type": "range",
      "id": "onhow_studio_button_bg_opacity",
      "min": 0,
      "max": 1,
      "step": 0.1,
      "label": "Button background opacity",
      "default": 1
    },
    {
      "type": "range",
      "id": "onhow_studio_button_border_opacity",
      "min": 0,
      "max": 1,
      "step": 0.1,
      "label": "Button border opacity",
      "default": 1
    }
  ],
  "presets": [
    {
      "name": "Autoplay Video (By ONHOW Studio)",
      "category": "Media"
    }
  ]
}
{% endschema %}