{{ 'youtubeapi.js' | asset_url | script_tag }}
<div id="home-video " class="index-section home-section {% if section.settings.is_effect_apply%}no_animation_effect{% else %}animation_effect{% endif %}" data-section-id="{{ section.id }}" data-section-type="home-video ">
    <div class="shopify-section-new">	  
      {% if section.settings.homevide_background != blank %}
			{% assign image_url = section.settings.homevide_background | img_url: "original" %}
      {%else%}
      		{% assign image_url = 'image-video-parallax.jpg' | asset_url %}
      {% endif %}
      
      {% if section.settings.vid_image_height == blank %}
        {%assign vid_slider_height = "522px" %}
      {%else%}
      	{%assign vid_slider_height = section.settings.vid_image_height %}
      {% endif %}
      
      <div data-animation_name="{{ section.settings.animation_name }}" data-animation_delay="{{ section.settings.animation_delay }}" class="{% if section.settings.animation_name != 'noeffect' %}scroll_animation {% endif %}homepage-image preventOverflow homepageVideo" style="height: 522px; min-height:  {{ vid_slider_height }}; background-image: url('{{ image_url }}');animation-duration: {{ section.settings.animation_duration }};">
        <div class="content--centered">
          <div class="text-center preventOverflowContent">

            <h{{section.settings.heading_tag}} style="font-weight:{{ section.settings.heading_tag_text_style12}};" class="title--flex">{{ section.settings.homevide_title }}</h{{section.settings.heading_tag}}>

            <a href="{{ section.settings.homevide_url }}?autoplay=1" class="icon-fallback-text {% if section.settings.video_type == 'popup' %} popupVideo {%else%} inpageVideo {% endif %}homepage-video__play">
              <span class="icon icon-play">
                <svg x="0px" y="0px" width="97px" height="97px" viewBox="0 0 97 97" enable-background="new 0 0 97 97"><path class="play_btn_color" d="M49.084,1.131C22.804,1.131,1.5,22.435,1.5,48.714c0,26.279,21.304,47.583,47.584,47.583c26.279,0,47.582-21.304,47.582-47.583C96.667,22.435,75.364,1.131,49.084,1.131z M38.118,62.52V34.908l25.93,13.807L38.118,62.52z"/></svg>
              </span>
            </a>
          </div>
        </div>
        
      </div>
  </div>
  
</div>
{% schema %}
  {
  	"name": "Image Video Parallax",
  	"settings": [
		{
              	"type": "paragraph",
              	"content": "Video Tutorial FR : [Image Video Parallax by Ulrich Vallée](https:\/\/www.ulrichvallee.com\/pages\/image-video-parallax)"
        },
  		{
  			"type": "image_picker",
  			"id": "homevide_background",
  			"label": "Background image",
  			"info": "2000px X 1245px required"
  		},
  		{
  			"type": "text",
  			"id": "homevide_title",
  			"label": "Title"
  		},
		{
  			"type": "text",
  			"id": "homevide_url",
  			"label": "Video URL"
  		},
		{
              "type": "select",
              "id": "video_type",
              "label": "Video Playing Type",
              "default":"popup",
              "options": [
                {
                    "value": "popup",
                    "label": "Popup"
                },
				{
                    "value": "inpage",
                    "label": "In Page"
                }
			  ]
		},
		{
              "type": "select",
              "id": "heading_tag",
              "label": "Heading Tag",
              "default":"2",
              "options": [
                {
                    "value": "1",
                    "label": "H1"
                },
                {
                    "value": "2",
                    "label": "H2"
                },
                {
                    "value": "3",
                    "label": "H3"
                },
                {
                    "value": "4",
                    "label": "H4"
                },
                {
                    "value": "5",
                    "label": "H5"
                },
                {
                    "value": "6",
                    "label": "H6"
                }
              ]
            },
			{
                "type": "select",
                "id": "heading_tag_text_style12",
                "label": "Heading Font Style",
                "options": [
                        {
                          "value": "300",
                          "label": "Lighter",
                          "group": "Font Style"
                        },
                        {
                          "value": "400",
                          "label": "Normal",
                          "group": "Font Style"
                        },
                        {
                          "value": "600",
                          "label": "Bold",
                          "group": "Font Style"
                        },
                        {
                          "value": "700",
                          "label": "Bolder",
                          "group": "Font Style"
                        }
                    ],
				"default": "600"
              },
			  {
  			 	"type": "text",
  				"id": "vid_image_height",
                "label": "Height",
                "placeholder":"522px",
                "info": "Not for top of page"
  			  },
              {
                  "type":"checkbox",
                  "id":"is_effect_apply",
                  "label":"Apply Section Effect",
                  "default":false
              },
              {
                  "type": "select",
                  "id": "animation_name",
                  "label": "Animation Effect",
                  "default": "noeffect",
                  "options": [
                    {
                      "label": "No Effect",
                      "value": "noeffect"
                    },
                    {
                      "label": "bounce",
                      "value": "bounce"
                    },
                    {
                      "label": "flash",
                      "value": "flash"
                    },
                    {
                      "label": "pulse",
                      "value": "pulse"
                    },
                    {
                      "label": "rubberBand",
                      "value": "rubberBand"
                    },
                    {
                      "label": "shake",
                      "value": "shake"
                    },
                    {
                      "label": "headShake",
                      "value": "headShake"
                    },
                    {
                      "label": "swing",
                      "value": "swing"
                    },
                    {
                      "label": "tada",
                      "value": "tada"
                    },
                    {
                      "label": "wobble",
                      "value": "wobble"
                    },
                    {
                      "label": "jello",
                      "value": "jello"
                    },
                    {
                      "label": "bounceIn",
                      "value": "bounceIn"
                    },
                    {
                      "label": "bounceInDown",
                      "value": "bounceInDown"
                    },
                    {
                      "label": "bounceInLeft",
                      "value": "bounceInLeft"
                    },
                    {
                      "label": "bounceInRight",
                      "value": "bounceInRight"
                    },
                    {
                      "label": "bounceInUp",
                      "value": "bounceInUp"
                    },
                    {
                      "label": "fadeIn",
                      "value": "fadeIn"
                    },
                    {
                      "label": "fadeInDown",
                      "value": "fadeInDown"
                    },
                    {
                      "label": "fadeInDownBig",
                      "value": "fadeInDownBig"
                    },
                    {
                      "label": "fadeInLeft",
                      "value": "fadeInLeft"
                    },
                    {
                      "label": "fadeInLeftBig",
                      "value": "fadeInLeftBig"
                    },
                    {
                      "label": "fadeInRight",
                      "value": "fadeInRight"
                    },
                    {
                      "label": "fadeInRightBig",
                      "value": "fadeInRightBig"
                    },
                    {
                      "label": "fadeInUp",
                      "value": "fadeInUp"
                    },
                    {
                      "label": "fadeInUpBig",
                      "value": "fadeInUpBig"
                    },
                    {
                      "label": "flipInX",
                      "value": "flipInX"
                    },
                    {
                      "label": "flipInY",
                      "value": "flipInY"
                    },
                    {
                      "label": "lightSpeedIn",
                      "value": "lightSpeedIn"
                    },
                    {
                      "label": "rotateIn",
                      "value": "rotateIn"
                    },
                    {
                      "label": "rotateInDownLeft",
                      "value": "rotateInDownLeft"
                    },
                    {
                      "label": "rotateInDownRight",
                      "value": "rotateInDownRight"
                    },
                    {
                      "label": "rotateInUpLeft",
                      "value": "rotateInUpLeft"
                    },
                    {
                      "label": "rotateInUpRight",
                      "value": "rotateInUpRight"
                    },
                    {
                      "label": "hinge",
                      "value": "hinge"
                    },
                    {
                      "label": "jackInTheBox",
                      "value": "jackInTheBox"
                    },
                    {
                      "label": "rollIn",
                      "value": "rollIn"
                    },
                    {
                      "label": "zoomIn",
                      "value": "zoomIn"
                    },
                    {
                      "label": "zoomInDown",
                      "value": "zoomInDown"
                    },
                    {
                      "label": "zoomInLeft",
                      "value": "zoomInLeft"
                    },
                    {
                      "label": "zoomInRight",
                      "value": "zoomInRight"
                    },
                    {
                      "label": "zoomInUp",
                      "value": "zoomInUp"
                    },
                    {
                      "label": "slideInDown",
                      "value": "slideInDown"
                    },
                    {
                      "label": "slideInLeft",
                      "value": "slideInLeft"
                    },
                    {
                      "label": "slideInRight",
                      "value": "slideInRight"
                    },
                    {
                      "label": "slideInUp",
                      "value": "slideInUp"
                    },
                    {
                      "label": "heartBeat",
                      "value": "heartBeat"
                    }
                  ]
                },
                {
                  "type": "select",
                  "id": "animation_duration",
                  "label": "Animation Duration",
                  "options": [
                    {
                      "value": "1s",
                      "label": "1s"
                    },
                    {
                      "value": "2s",
                      "label": "2s"
                    },
                    {
                      "value": "3s",
                      "label": "3s"
                    }
                  ],
                  "default": "1s"
                },
                {
                  "type": "select",
                  "id": "animation_delay",
                  "label": "Animation Delay",
                  "options": [
                    {
                      "value": "0",
                      "label": "0"
                    },
                    {
                      "value": "1",
                      "label": "1s"
                    },
                    {
                      "value": "2",
                      "label": "2s"
                    },
                    {
                      "value": "3",
                      "label": "3s"
                    },
                    {
                      "value": "4",
                      "label": "4s"
                    },
                    {
                      "value": "5",
                      "label": "5s"
                    },
                    {
                      "value": "6",
                      "label": "6s"
                    },
                    {
                      "value": "7",
                      "label": "7s"
                    },
                    {
                      "value": "8",
                      "label": "8s"
                    }
                  ],
                  "default": "0"
              }
  		
  	],
	"presets": [
      {
        "name": "Image Video Parallax",
        "category": "Video"
      }
    ]
  }
{% endschema %}