Add a video and make it behave as a gif

[JesusGomicare]

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

[rajweb]

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 Video

1. Video Settings: Ensure your video is embedded correctly and has the following attribute
   .autoplay.muted.loop(if you want it to repeat)
   For example:

<video autoplay muted loop>
    <source src="your-video-file.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

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 </body> tag), add the following Javascript&colon;

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var video = document.querySelector('video');
        if (video) {
            video.play();
        }
    });
</script>

• 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

[JesusGomicare]

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 -%}

<div class="color-{{ section.settings.color_scheme }} gradient">
  <div class="video-section isolate{% unless section.settings.full_width %} page-width{% endunless %} section-{{ section.id }}-padding">
    <div
      {% if section.settings.full_width %}
        class="page-width"
      {% endif %}
    >
      {%- unless section.settings.heading == blank -%}
        <div class="title-wrapper title-wrapper--no-top-margin">
          <h2 class="title inline-richtext {{ section.settings.heading_size }}">{{ section.settings.heading }}</h2>
        </div>
      {%- endunless -%}
    </div>
    <noscript>
      <div
        class="video-section__media"
        {% if poster != null %}
          style="--ratio-percent: {{ 1 | divided_by: poster.aspect_ratio | times: 100 }}%;"
        {% endif %}
      >
        {%- if section.settings.video == null and section.settings.video_url != null -%}
          <a
            href="{{ section.settings.video_url }}"
            class="video-section__poster media media--transparent{% if poster == null %} video-section__placeholder{% endif %}"
          >
            {%- if poster != null -%}
              {{ poster
                | image_url: width: 3840
                | image_tag: loading: 'lazy', sizes: sizes, widths: '375, 750, 1100, 1500, 1780, 2000, 3000, 3840', alt: alt
              }}
            {%- else -%}
              {{ 'collection-2' | placeholder_svg_tag: 'placeholder-svg placeholder' }}
            {%- endif -%}
          </a>
        {%- else -%}
<video autoplay muted loop>
    <source src="https://cdn.shopify.com/videos/c/o/v/a472ac5410344c9cb6ae87dc699f74d2.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>
        {%- endif -%}
      </div>
    </noscript>
    <deferred-media
      class="video-section__media deferred-media no-js-hidden gradient global-media-settings{% if section.settings.full_width %} global-media-settings--full-width{% endif %}{% if fix_ratio %} media-fit-cover{% endif %}"
      data-media-id="{{ video_id }}"
      {% if poster != null %}
        style="--ratio-percent: {{ 1 | divided_by: poster.aspect_ratio | times: 100 }}%;"
      {% endif %}
    >
      <button
        id="Deferred-Poster-Modal-{{ video_id }}"
        class="video-section__poster media deferred-media__poster media--landscape"
        type="button"
        aria-label="{{ alt }}"
      >
        {%- if poster != null -%}
          {{ poster
            | image_url: width: 3840
            | image_tag: loading: 'lazy', sizes: sizes, widths: '375, 750, 1100, 1500, 1780, 2000, 3000, 3840', alt: alt
          }}
        {%- else -%}
          {{ 'collection-2' | placeholder_svg_tag: 'placeholder-svg placeholder' }}
        {%- endif -%}
        <span class="deferred-media__poster-button motion-reduce">
          {%- render 'icon-play' -%}
        </span>
      </button>
      <template>
        {%- if section.settings.video == null and section.settings.video_url != null -%}
          {%- liquid
            assign loop = ''
            if section.settings.enable_video_looping
              assign loop = '&loop=1&playlist=' | append: video_id
            endif
          -%}
          {%- if section.settings.video_url.type == 'youtube' -%}
            <iframe
              src="https://www.youtube.com/embed/{{ video_id }}?enablejsapi=1&autoplay=1{{ loop }}"
              class="js-youtube"
              allow="autoplay; encrypted-media"
              allowfullscreen
              title="{{ section.settings.description | escape }}"
            ></iframe>
          {%- else -%}
            <iframe
              src="https://player.vimeo.com/video/{{ video_id }}?autoplay=1{{ loop }}"
              class="js-vimeo"
              allow="autoplay; encrypted-media"
              allowfullscreen
              title="{{ section.settings.description | escape }}"
            ></iframe>
          {%- endif -%}
        {%- else -%}
<video autoplay muted loop>
    <source src="https://cdn.shopify.com/videos/c/o/v/a472ac5410344c9cb6ae87dc699f74d2.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>
        {%- endif -%}
      </template>
    </deferred-media>
  </div>
</div>
      <script>
    document.addEventListener('DOMContentLoaded', function() {
        var video = document.querySelector('video');
        if (video) {
            video.play();
        }
    });
</script>

[rajweb]

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 -%}

<div class="color-{{ section.settings.color_scheme }} gradient">
  <div class="video-section isolate{% unless section.settings.full_width %} page-width{% endunless %} section-{{ section.id }}-padding">
    <div {% if section.settings.full_width %} class="page-width" {% endif %}>
      {%- unless section.settings.heading == blank -%}
        <div class="title-wrapper title-wrapper--no-top-margin">
          <h2 class="title inline-richtext {{ section.settings.heading_size }}">{{ section.settings.heading }}</h2>
        </div>
      {%- endunless %}
    </div>

    <noscript>
      <div class="video-section__media" 
        {% if poster != null %} style="--ratio-percent: {{ 1 | divided_by: poster.aspect_ratio | times: 100 }}%;" {% endif %}>
        
        {%- if section.settings.video == null and section.settings.video_url != null -%}
          <a href="{{ section.settings.video_url }}" 
             class="video-section__poster media media--transparent{% if poster == null %} video-section__placeholder{% endif %}">
            {%- if poster != null -%}
              {{ poster | image_url: width: 3840 | image_tag: loading: 'lazy', sizes: sizes, 
                widths: '375, 750, 1100, 1500, 1780, 2000, 3000, 3840', alt: alt }}
            {%- else -%}
              {{ 'collection-2' | placeholder_svg_tag: 'placeholder-svg placeholder' }}
            {%- endif %}
          </a>
        {%- else -%}
          <video autoplay muted loop>
            <source src="https://cdn.shopify.com/videos/c/o/v/a472ac5410344c9cb6ae87dc699f74d2.mp4" type="video/mp4">
            Your browser does not support the video tag.
          </video>
        {%- endif %}
      </div>
    </noscript>

    <deferred-media class="video-section__media deferred-media no-js-hidden gradient global-media-settings{% if section.settings.full_width %} global-media-settings--full-width{% endif %}{% if fix_ratio %} media-fit-cover{% endif %}" 
      data-media-id="{{ video_id }}" 
      {% if poster != null %} style="--ratio-percent: {{ 1 | divided_by: poster.aspect_ratio | times: 100 }}%;" {% endif %}>
      
      <button id="Deferred-Poster-Modal-{{ video_id }}" 
              class="video-section__poster media deferred-media__poster media--landscape" 
              type="button" aria-label="{{ alt }}">
        {%- if poster != null -%}
          {{ poster | image_url: width: 3840 | image_tag: loading: 'lazy', sizes: sizes, 
            widths: '375, 750, 1100, 1500, 1780, 2000, 3000, 3840', alt: alt }}
        {%- else -%}
          {{ 'collection-2' | placeholder_svg_tag: 'placeholder-svg placeholder' }}
        {%- endif %}
        <span class="deferred-media__poster-button motion-reduce">
          {%- render 'icon-play' -%}
        </span>
      </button>

      <template>
        {%- if section.settings.video == null and section.settings.video_url != null -%}
          {%- liquid
            assign loop = ''
            if section.settings.enable_video_looping
              assign loop = '&loop=1&playlist=' | append: video_id
            endif
          -%}
          {%- if section.settings.video_url.type == 'youtube' -%}
            <iframe src="https://www.youtube.com/embed/{{ video_id }}?enablejsapi=1&autoplay=1{{ loop }}" 
                    class="js-youtube" allow="autoplay; encrypted-media" allowfullscreen 
                    title="{{ section.settings.description | escape }}"></iframe>
          {%- else -%}
            <iframe src="https://player.vimeo.com/video/{{ video_id }}?autoplay=1{{ loop }}" 
                    class="js-vimeo" allow="autoplay; encrypted-media" allowfullscreen 
                    title="{{ section.settings.description | escape }}"></iframe>
          {%- endif %}
        {%- else -%}
          <video autoplay muted loop>
            <source src="https://cdn.shopify.com/videos/c/o/v/a472ac5410344c9cb6ae87dc699f74d2.mp4" type="video/mp4">
            Your browser does not support the video tag.
          </video>
        {%- endif %}
      </template>
    </deferred-media>
  </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    const video = document.querySelector('video');
    if (video) {
      video.play();
    }
  });
</script>

Let me know if you encounter any issues.

[EvinceDev]

Hello @JesusGomicare , Use this code 

<div class="video-container">
        <video autoplay muted loop playsinline>
            <source src="image.mp4" type="video/mp4">
        </video>
    </div>

[namphan]

Hi @JesusGomicare,

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