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

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

PrimeMeats
Tourist
4 0 1

my video player is not playing videos and the controls seem to be greyed out

PrimeMeats_0-1715218479651.png

 

 

 

 

{% schema %}
{
  "name": "VideoHeaderPersonalizado",
  "settings": [
    {
  "type": "video",
  "id": "video",
  "label": "self-hosted video"
},
    {
      "type": "url",
      "id": "VideoLink",
      "label": "Video Link"
    }
  ],
  "presets": [
    {
      "name": "VideoHeaderPersonalizado"
    }
  ]
}
{% endschema %}

  <div class="videoContainer">
<a href="{{ section.settings.VideoLink}}" {% if section.settings.VideoLink == blank %}style="pointer-events: none;"{% endif %}>
  <video class="HeaderVideo" src="{{ section.settings.video | video_tag: autoplay: false, loop: false, muted: true, controls: true, image_size:'1902x684' }}"></video>
</a>
  </div>

<style>
.videoContainer{
border: 2px solid white;
}

video.HeaderVideo {
    width: 100%;
    object-fit: cover;
    height: 800px;
}


</style>

 

 

 

 

Reply 1 (1)

Made4uo-Ribe
Shopify Partner
10036 2387 3014

Hi @PrimeMeats 

 

The problem was you were adding two video tags in your code. I fix the code, please see below. I am not sure what the a tag for but I comment it out. 

 

<style>
  .videoContainer{
  border: 2px solid white;
  }

  video.HeaderVideo {
      width: 100%;
      object-fit: cover;
      height: 800px;
  }
</style>

<div class="videoContainer">
  <!--
    <a
      href="{{ section.settings.VideoLink}}"
      {% if section.settings.VideoLink == blank %}
        style="pointer-events: none;"
      {% endif %}
    >
    </a>
  -->
  {{
    section.settings.video
    | video_tag: autoplay: false, loop: false, muted: true, controls: true, image_size: '1902x684', class: 'HeaderVideo'
  }}
</div>

{% schema %}
{
  "name": "VideoHeaderPersonalizado",
  "settings": [
    {
  "type": "video",
  "id": "video",
  "label": "self-hosted video"
},
    {
      "type": "url",
      "id": "VideoLink",
      "label": "Video Link"
    }
  ],
  "presets": [
    {
      "name": "VideoHeaderPersonalizado"
    }
  ]
}
{% endschema %}
If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.