What's your biggest current challenge? Have your say in Community Polls along the right column.

Re: Add a video and make it behave as a gif

Add a video and make it behave as a gif

JesusGomicare
Excursionist
28 0 4

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

 

Replies 5 (5)

rajweb
Shopify Partner
398 39 55

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

-Need a Shopify developer?
https://rajatweb.dev/
Email: rajat.shopify@gmail.com
JesusGomicare
Excursionist
28 0 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 -%}

<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
Shopify Partner
398 39 55

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.

-Need a Shopify developer?
https://rajatweb.dev/
Email: rajat.shopify@gmail.com

EvinceDev
Shopify Partner
121 13 13

Hello @JesusGomicare , Use this code 

<div class="video-container">
        <video autoplay muted loop playsinline>
            <source src="image.mp4" type="video/mp4">
        </video>
    </div>
Shopify Theme Advanced Backend Developer and Debugger
Want to modify or develop new app, Hire us.
If our Answer is helpful then please Like and Accept Solution!
I am an eCommerce and Marketing Technology consultant based in India.
To inquire about consulting work availability, You can reach me on Skype by live: rahul.evince or mail on partners@evincedev.com.
Shopify Apps URL :- https://apps.shopify.com/partners/gemfind1
Customization on Shopify Theme | Shopify App Development | SEO & Digital Marketing

namphan
Shopify Partner
2059 271 300

Hi @JesusGomicare,

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

Coffee tips fuels my dedication.
Shopify Development Service
PageFly Page Builder Optimize your Shopify store (Free plan available)
Need help with your store? namphan992@gmail.com