Why isn't my custom section video playing on Dawn theme?

Technical Q&A
, , , ,

Topic summary

A developer is experiencing issues with a custom video section in Shopify’s Dawn theme where the video player controls appear but the video itself won’t play.

Key Details:

  • The video works when the URL is hardcoded directly, but fails when loaded through section settings
  • Browser console shows a “net::ERR_ABORTED 404 (Not Found)” error, indicating the video file cannot be located
  • The code uses section.settings.video_upload to dynamically load videos via the schema’s video picker

Current Status:
A responder (Himanshu7) claims to have successfully debugged and resolved the issue, offering to provide updated code upon connection. However, the specific solution has not yet been shared in the thread.

Technical Context:
The section schema includes both video type (for uploads) and text type (for video URLs) settings, suggesting the developer wants flexibility in video sources.

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

I am currently working on dawn theme on a custom section for a shopify website I am developing.

This section has a video and text next to said video. the video controller and everything appears except for the video. it does not play at all. It isn’t an issue with the video itself but the way how my section is recieving this video, but i do not know how to solve it. If i paste the video link directly into the code it works fine. But I need to be able to change the videos in this section.

Here is the code:

<section class="media-image-section">
        {% if section.settings.single_image %}
          <img class="single-image" src="{{ section.settings.single_image | img_url: 'master' }}" alt="Single Image">
        {% endif %}
        {% if section.settings.video_upload != blank %}
          <video class="single-video" autoplay muted playsinline controls preload="auto">
            <source
              class="actual-video-playing"
              src="{{ section.settings.video_upload }}"
              type="video/mp4"
            >
            Your browser does not support the video tag.
          </video>
        {% endif %}
      </section>

and here is part of the schema:

{
  "name": "BW - Multimedia carousel",
  "settings": [
    {
      "type": "image_picker",
      "id": "single_image",
      "label": "Single Image",
      "info": "Select an image to display."
    },
    {
      "type": "text",
      "id": "video_url",
      "label": "Video URL",
      "info": "Enter the URL of the video to display."
    },
    {
  "type": "video",
  "id": "video_upload",
  "label": "Upload Video",
  "info": "Upload a video to display."
},
    {
      "type": "text",
      "id": "demo-button",
      "label": "Button text"
    },
    {
      "type": "image_picker",
      "id": "demo-button-icon",
      "label": "Button icon"
    },
    {
      "type": "richtext",
      "id": "regular-description",
      "label": "Description",
      "default": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>"
    }
  ],

I am also getting an issue from the console which basically says that it cannot find the video. it looks something like this:
net::ERR_ABORTED 404 (Not Found)

I must also add I am using Dawn theme for this.

Thank you very much.

2

Previously, we encountered issues with the code not functioning properly. After thorough debugging and testing, I successfully resolved the problem.

Connect me and I will provide the updated the code.

Regards
Himanshu