How to autoplay a YouTube video on a homepage?

Store Design
, , ,

Topic summary

A user seeks help making a YouTube video autoplay on their Shopify store homepage.

Initial Solution Provided:

  • PageFly support suggests adding custom code to the theme.liquid file above the </head> tag
  • Instructions include navigating to Online Stores > Themes > Actions > Edit code

Follow-up Issue:

  • The user shares their existing video section code (CSS and Liquid markup for video embedding)
  • Asks if this code can be modified to enable YouTube autoplay
  • Reports that the suggested solution is “not working”

Current Status:

  • The discussion remains unresolved
  • The provided code snippet appears to be standard Shopify video section markup with iframe embeds for both YouTube and Vimeo
  • No working autoplay solution has been confirmed yet

Note: Some text in the original posts appears reversed/encoded, which may indicate formatting issues in the source thread.

Summarized with AI on November 13. AI used: claude-sonnet-4-5-20250929.
1

Hello,Can someone help me:
How do i autoplay a youtube video in my homepage
website: dongfutrade.com

2

Hi @dongfuCamera

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the

Hope this can help you solve the issue

Best regards,

Richard | PageFly

3

thanks you very much

can i chang this code and make youtube video autoplay

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

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

{{ section.settings.heading }}

{%- endunless -%}
{%- if section.settings.cover_image != blank -%} {%- 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 -%} {%- assign alt = 'sections.video.load_video' | t: description: section.settings.description | escape -%} {{ section.settings.cover_image | 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 -%} {%- render 'icon-play' -%} {%- if section.settings.video_url.type == 'youtube' -%} {%- else -%} {%- endif -%}
{% schema %} { "name": "t:sections.video.name", "tag": "section", "class": "section", "settings": [ { "type": "text", "id": "heading", "default": "Video", "label": "t:sections.video.settings.heading.label" }, { "type": "select", "id": "heading_size", "options": [ { "value": "h2", "label": "t:sections.all.heading_size.options__1.label" }, { "value": "h1", "label": "t:sections.all.heading_size.options__2.label" }, { "value": "h0", "label": "t:sections.all.heading_size.options__3.label" } ], "default": "h1", "label": "t:sections.all.heading_size.label" }, { "type": "image_picker", "id": "cover_image", "label": "t:sections.video.settings.cover_image.label" }, { "type": "video_url", "id": "video_url", "accept": [ "youtube", "vimeo" ], "default": "[https://www.youtube.com/watch?v=_9VUPq3SxOc](https://www.youtube.com/watch?v=_9VUPq3SxOc)", "label": "t:sections.video.settings.video_url.label", "placeholder": "t:sections.video.settings.video_url.placeholder", "info": "t:sections.video.settings.video_url.info" }, { "type": "text", "id": "description", "label": "t:sections.video.settings.description.label", "info": "t:sections.video.settings.description.info" }, { "type": "checkbox", "id": "full_width", "label": "t:sections.video.settings.full_width.label", "default": false }, { "type": "select", "id": "color_scheme", "options": [ { "value": "accent-1", "label": "t:sections.all.colors.accent_1.label" }, { "value": "accent-2", "label": "t:sections.all.colors.accent_2.label" }, { "value": "background-1", "label": "t:sections.all.colors.background_1.label" }, { "value": "background-2", "label": "t:sections.all.colors.background_2.label" }, { "value": "inverse", "label": "t:sections.all.colors.inverse.label" } ], "default": "background-1", "label": "t:sections.all.colors.label" }, { "type": "header", "content": "t:sections.all.padding.section_padding_heading" }, { "type": "range", "id": "padding_top", "min": 0, "max": 100, "step": 4, "unit": "px", "label": "t:sections.all.padding.padding_top", "default": 36 }, { "type": "range", "id": "padding_bottom", "min": 0, "max": 100, "step": 4, "unit": "px", "label": "t:sections.all.padding.padding_bottom", "default": 36 } ], "presets": [ { "name": "t:sections.video.presets.name" } ] } {% endschema %}
4

i use this code， it not working