Autoplay video with no buttons displayed as banner image + Dawn theme

[ciandastudio]

Hello!

I would like a video banner to play automatically upon entering my website. I do not want any buttons to display and i want it to autoloop. Does anyone know what code I can use? 
I have managed to get rid of the play button, but it is quite glitchy.

thankyou

[theycallmemakka · Accepted solution]

Hi @ciandastudio ,

This will require adding a new section to the theme. I have create a custom section which adds autoplay video on the site. Please add this as the new section.

After adding this section on the theme, you can add this to the site via customize.

{% 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
-%}
<video playsinline autoplay muted loop poster="{{ poster | image_url: width: 3840 }}" style="width: 100%; height: 100%; object-fit: cover;" id="video-{{ section.id }}">
    <source src="{{ section.settings.video.sources[1].url }}" type="video/mp4">
    Your browser does not support the video tag.
</video>

      <style>
        div#shopify-section-template--16108370624665__6a9abf06-1dde-4645-9360-ddbb03a13b7b {
    display: flex;
    align-items: center;
}

        </style>
<script>
  function getDivDimensionsByClassMakka(className, ratio) {
    var elements = document.querySelector(className)

    if (elements) {
        var width = elements.offsetWidth;
        var height = width / ratio;
        
        return { width: width, height: height };
    } else {
        // Handle the case where no element with the specified class is found
        console.error("No element found with class: " + className);
        return null;
    }
}

// Example usage with a ratio of 1.75
  var ratio = {{ section.settings.video.aspect_ratio }};
  var dimensions = getDivDimensionsByClassMakka("#video-{{ section.id }}", ratio);
  
  if (dimensions) {
      document.querySelector('#video-{{ section.id }}').style.minHeight = `${Math.round(dimensions.height - 10)}px`
  }

  window.onresize = function(){
    var dimensions = getDivDimensionsByClassMakka("#video-{{ section.id }}", ratio);
    if (dimensions) {
        document.querySelector('#video-{{ section.id }}').style.minHeight = `${Math.round(dimensions.height)}px`
    }
  };
</script>

      
{% 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"
      }
    ],
    "presets": [
      {
        "name": "Full Width Video"
      }
    ]
  }
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka

[ciandastudio]

Thanks! Thats perfect, and so easy! 

Would you be able to offer advice on how I could make the video larger on the mobile display?  I would like to increase the height 

[ciandastudio]

My other question is, can i make the whole video a link? 
My client would like to be able to tap on the video banner and it link to the "ALL PRODUCTS" page

[theycallmemakka]

Can you provide URL to the page where the video section is added? I will review it and provide CSS accordingly.

Regarding adding link, this needs to be custom added on the section.

[ciandastudio]

the website is www.ciandastudio.com
It is the opening banner on the home page

Could you please explain how I would add the link?

[theycallmemakka]

This is not a shopify site. Can you provide link to the shopify site that has video banner?

[ciandastudio]

Sorry, www.hillscollide.com
Password- hcvisitor

[ohadster]

Hey Makka,

This is brilliant, i am using it right now.

Is there an option to add a button over the video? (like "shop now" and direct to a collection)

thanks!

Ohad

[theycallmemakka]

Hi @ohadster ,

We will have to custom code this section if we want to add the button over it

[ohadster]

Hey @theycallmemakka ,

Could you help out with this?

[ParadiseMedia]

Hi @theycallmemakka, thank you so much for this solution and for sharing your knowledge. I would like to kindly ask you if there is a way to let audio from the video file sound? I really appreciate your time and support.

[Banks1]

Hey how to add this code as a block on product info card? Its works for me as a section, but i want to have this autoplay video just above product title.