Autoplay on video on my website

[creativebp8]

On my website here I have a video on my homepage but I tried to make sure autoplay was set to “true” in my code and it doesn’t seem to be working. Muted is also set to true in the code.

How do i fix this?

[Dan-From-Ryviu]

You can try to set your video like this and check again

<video autoplay muted 
  

Make sure you remove controls tag from your video code

[storemindz]

Hey, I checked your website and it is showing image until you click the play svg then the video is added and played and after it starts playing its looped and play correct. the issue is image is loading and not the video when the page reload. i will need collaborator access to your store to check and fix this issue. You are welcome to message me and share the collaborator code, so i can find solution for you.

Thanks

[miko11]

Autoplaying videos on Shopify (or anywhere on the web) can be a bit tricky — especially on mobile browsers. By default:

• Most browsers (Safari/iOS in particular) block autoplay unless the video is muted and set to playsinline.

• Even with that, low-power mode on iPhones will still prevent autoplay completely (something outside of Shopify’s control).

Try updating your code like this:

<video autoplay loop muted playsinline>
  <source src="{{ section.settings.video | file_url }}" type="video/mp4">
</video>

The key bits are muted and playsinline. Without those, iOS won’t autoplay.

[oscprofessional]

Hi @creativebp8 ,
If autoplay is not working in your video section, you can create a new autoplay video section that supports autoplay by following the steps below:

Create a new custom section

1. In your Shopify admin, go to Online Store → Themes → Actions → Edit code.
2. Under Sections, click Add a new section. Name it, e.g., autoplay-video.liquid.

{% schema %}
{
  "name": "Autoplay Video Section",
  "settings": [
    {
      "type": "select",
      "id": "video_type",
      "label": "Video Type",
      "options": [
        { "value": "mp4", "label": "MP4 Video" },
        { "value": "youtube", "label": "YouTube Video" }
      ],
      "default": "mp4"
    },
    {
      "type": "url",
      "id": "video_url",
      "label": "Video URL"
    },
    {
      "type": "checkbox",
      "id": "mute",
      "label": "Mute Video (MP4 only)",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "loop",
      "label": "Loop Video (MP4 only)",
      "default": true
    }
  ],
  "presets": [
    {
      "name": "Autoplay Video"
    }
  ]
}
{% endschema %}

<div class="autoplay-video-section">
  {% if section.settings.video_type == 'mp4' and section.settings.video_url != blank %}
    <video 
      class="autoplay-video" 
      autoplay 
      {% if section.settings.mute %} muted {% endif %}
      {% if section.settings.loop %} loop {% endif %}
      playsinline
      controls
    >
      <source src="{{ section.settings.video_url }}" type="video/mp4">
      Your browser does not support the video tag.
    </video>
  {% elsif section.settings.video_type == 'youtube' and section.settings.video_url != blank %}
    {% assign video_id = section.settings.video_url | split: 'v=' | last | split: '&' | first %}
    <div class="youtube-wrapper">
      <iframe 
        width="100%" 
        height="500" 
        src="https://www.youtube.com/embed/{{ video_id }}?autoplay=1&mute=1&loop=1&playlist={{ video_id }}" 
        frameborder="0" 
        allow="autoplay; encrypted-media" 
        allowfullscreen
      ></iframe>
    </div>
  {% endif %}
</div>

<style>
.autoplay-video-section {
  text-align: center;
  margin: 20px 0;
}

.autoplay-video {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}

.youtube-wrapper iframe {
  max-width: 100%;
  border-radius: 10px;
}
</style>

• Select Video Type: MP4 or YouTube.
• Paste the video URL:
• MP4 → direct video file URL.
• YouTube → standard watch URL (https://www.youtube.com/watch?v=VIDEO_ID).
• MP4 videos can be muted & looped; YouTube videos autoplay muted by default (autoplay with sound is blocked by browsers).