<div id="video-slider " class="index-section home-section" data-section-id="{{ section.id }}" data-section-type="home-slider ">
   
	<div class="shopify-section-new">	  
     
      
      {% if section.settings.image_height == blank %}
        {%assign slider_height = "767px" %}
      {%else%}
      	{%assign slider_height = section.settings.image_height %}
      {% endif %}
	
      <div data-video-status="{% if section.settings.video_autoplay %}play{%else%}pause{% endif %}" class="homepage-image homepage-banner-video preventOverflow" style="height: 308px; min-height: {{ slider_height }};">
        	<div class="video_play_wrapper"><i class="fa fa-{% if section.settings.video_autoplay %}pause{%else%}play{% endif %}"></i></div>
			<video {% if section.settings.video_autoplay %}autoplay="false"{% endif %} id="home-video-banner" class="video-header" preloader="auto" loop="" width="{{ section.settings.video_width }}" height="{{ section.settings.video_height }}" data-volume="unmute" data-autoplay="true" data-loop="loop" src="{{ section.settings.video_url }}" style="width: 100%; height: 1056px;">
				
           </video>
        
         

      </div>
  </div>
</div>


{% schema %}
  {
  	"name": "Video Banner",
  	"settings": [
{
              	"type": "paragraph",
              	"content": "Video Tutorial FR : [Video Banner by Ulrich Vallée](https:\/\/www.ulrichvallee.com\/pages\/video-banner)"
        },
		

  		{
  			"type": "text",
  			"id": "video_url",
  			"label": "Video URL"
  		},
		{
  			"type": "checkbox",
  			"id": "video_autoplay",
  			"label": "Video Autoplay"
  		},
		
		{
  			"type": "text",
  			"id": "video_width",
  			"label": "Video Original Width"
  		},
		{
  			"type": "text",
  			"id": "video_height",
  			"label": "Video Original Height"
  		}
		
  		
  	]
  }
{% endschema %}
