How can I add a video to my header instead of a picture?

[timmyhaha]

Hi,

Can someone please help me? I would like to add a video in the header instead of a picture, is that possible?

If yes, how?

https://ljusjatten.se

[theycallmemakka]

Do you mean you want to add a video on the banner?

[timmyhaha]

Yes @theycallmemakka

Thanks for you reply!

[theycallmemakka]

Hi @timmyhaha ,

By default Dawn theme only has a video component which doesnot autoplay. You will have to custom code the section o make them a banner.

Till now I have been able to make this much progress [https://mangit.myshopify.com/]. This custom feature is time consuming.

[timmyhaha]

Oh, but it do look perfect in your video! Is there any chance you can help me out with that?

[theycallmemakka]

Hi @timmyhaha ,

Create a new section on your theme with the below content.

{% if section.settings.video  %}
{%- 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.cover_image
     assign poster =  section.settings.cover_image
  endif
  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
-%}

  
    ### {{ section.settings.title }}
    

{{ section.settings.subtitle }}

  {% if section.settings.url %}
    {{ section.settings.button_text }}
  {% endif %}
    
  

      

      
{% endif %}
{% schema %}
  {
    "name": "Full Width Video",
    "settings": [    
      {
        "type": "image_picker",
        "id": "cover_image",
        "label": "t:sections.video.settings.cover_image.label"
      },
      {
        "type": "video",
        "id": "video",
        "label": "Video"
      },
      {
        "type": "text",
        "id": "title",
        "label": "Title"
      },
      {
        "type": "text",
        "id": "subtitle",
        "label": "Subtitle"
      },
      {
        "type": "text",
        "id": "button_text",
        "label": "Button Text",
        "default": "Button"
      },
      {
        "type": "url",
        "id": "url",
        "label": "URL"
      }
    ],
    "presets": [
      {
        "name": "Full Width Video"
      }
    ]
  }
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}

After you have created the section, you can add this section via customize.

[timmyhaha]

Hi @theycallmemakka

It do works, but there is no button displayed, also can I get the text and button look the same as my other buttons / fonts?

Thanks a lot for helping me with this.

[theycallmemakka]

Did you add URL on the customize section?

[timmyhaha]

Yes I did, but there are some customization on my team so it might be a bug due to other configurations? Please let me know when you have time to help me out, would really appreciate it

//T