Add a video and make it behave as a gif

Store Design
, , ,
1

Hey guys,

I’m adding a video to my page, I want it to behave as a GIF, meaning, no sound, no UI to control it and for it to autoplay as soon as the page is loaded.

So far I’ve managed all but to make it autoplay as soon as the page is loaded.

Any ideas on how to do it?

Here’s the link

https://gomicare.es/products/product-test-ground

Thanks a lot

2

Hey @JesusGomicare ,

To make your video autoplay as soon as the page is loaded in your Shopify store, you’ll need to ensure a few things in your video settings and potentially add a small piece of JavaScript to your theme.

Steps to Autoplay the Video1. Video Settings: Ensure your video is embedded correctly and has the following attribute

.autoplay.muted.loop(if you want it to repeat)
For example:

2. JavaScript to Autoplay: If the video doesn’t autoplay despite having the correct attributes, you can add JavaScript to force it. Here’s how:

  1. Online Store > Themes > Edit Code
  • Open the theme.liquid file or the specific template file where your video is located.
  • At the bottom of the file (before the closing tag), add the following Javascript:
  • Check Browser Autoplay Policies: Note that some browsers have strict autoplay policies that prevent videos from autoplaying unless they’re muted. Since you’ve already set the video to mute, this should allow it to autoplay in most cases.
  • Let me know if you need any further assistance!

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regard,

Rajat Sharma

3

Hello @JesusGomicare , Use this code
4

Hi Rajweb,

I’m not quite sure how or where exactly do I need to add step 1. I did it like this, is this correct?

{{ 'video-section.css' | asset_url | stylesheet_tag }}
{{ 'component-deferred-media.css' | asset_url | stylesheet_tag }}

{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }

  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }
{%- endstyle -%}

{%- liquid
  assign video_id = section.settings.video.id | default: section.settings.video_url.id
  assign video_alt = section.settings.video.alt | default: section.settings.description
  assign alt = 'sections.video.load_video' | t: description: video_alt | escape
  assign poster = section.settings.video.preview_image | default: section.settings.cover_image

  if section.settings.video != null
    assign ratio_diff = section.settings.video.aspect_ratio | minus: poster.aspect_ratio | abs
    if ratio_diff < 0.01 and ratio_diff > 0
      assign fix_ratio = true
    endif
  endif
-%}

{%- capture sizes -%}
  {% if section.settings.full_width -%}
    100vw
  {%- else -%}
    (min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 }}px, (min-width: 750px)
    calc(100vw - 10rem), 100vw
  {%- endif %}
{%- endcapture -%}

  

    

      {%- unless section.settings.heading == blank -%}
        

          ## {{ section.settings.heading }}
        

      {%- endunless -%}
5

Hi @JesusGomicare ,

You can refer to the following article, it will help you add sections and everything displays well.

6

Hey @JesusGomicare ,

{{ 'video-section.css' | asset_url | stylesheet_tag }}
{{ 'component-deferred-media.css' | asset_url | stylesheet_tag }}

{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }

  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }
{%- endstyle -%}

{%- liquid
  assign video_id = section.settings.video.id | default: section.settings.video_url.id
  assign video_alt = section.settings.video.alt | default: section.settings.description
  assign alt = 'sections.video.load_video' | t: description: video_alt | escape
  assign poster = section.settings.video.preview_image | default: section.settings.cover_image

  if section.settings.video != null
    assign ratio_diff = section.settings.video.aspect_ratio | minus: poster.aspect_ratio | abs
    if ratio_diff < 0.01 and ratio_diff > 0
      assign fix_ratio = true
    endif
  endif
-%}

{%- capture sizes -%}
  {% if section.settings.full_width -%}
    100vw
  {%- else -%}
    (min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 }}px, 
    (min-width: 750px) calc(100vw - 10rem), 100vw
  {%- endif %}
{%- endcapture -%}

  

    

      {%- unless section.settings.heading == blank -%}
        

          ## {{ section.settings.heading }}
        

      {%- endunless %}

Let me know if you encounter any issues.