Auto loop video banner

[GoSmoothSHOP]

Hi,

I would like to have a video as a website banner. With the theme customizer I can't manage to get a video in autoloop as background with button and text. Does anyone know how I can get this done?

Thanks in advance!

Shopify store: https://go-smooth.com/

[KetanKumar]

@GoSmoothSHOP 

can you share video section code or try this 

https://codepen.io/adrianparr/pen/QxMvdj

[GoSmoothSHOP]

Thanks for your reply.

This is my index__video.liquid code. Or do I need to add a custom HTML code section with a custom code?

{% comment %}
** Video - dynamic **
- Draggable section
{% endcomment %}

{% include 'include-video' %}

{% schema %}
{
  "name": "Video",
  "class": "video-section jsVideo",
  "settings": [
    {
      "type": "header",
      "content": "Video"
    },
    {
      "type": "select",
      "id": "aspect_ratio",
      "label": "Aspect ratio",
      "options": [
        {
          "value": "16:9",
          "label": "16:9"
        },
        {
          "value": "4:3",
          "label": "4:3"
        }
      ],
      "default": "16:9"
    },
    {
      "type": "checkbox",
      "id": "autoplay",
      "label": "Autoplay video",
      "info": "Limited browser support for autoplaying video. [Learn more](https:\/\/help.outofthesandbox.com\/hc\/en-us\/articles\/360000661568)",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "autoloop",
      "label": "Autoloop video",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "mute_video",
      "label": "Mute video",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "controls",
      "label": "Show video controls",
      "default": true
    },
    {
      "type": "video_url",
      "id": "iframe_video",
      "label": "YouTube or Vimeo video URL",
      "accept": ["youtube", "vimeo"],
      "default": "https://www.youtube.com/watch?v=8NxS0vrPcsA"
    },
    {
      "type": "text",
      "id": "html5_video",
      "label": "HTML5 MP4/OGV File URL"
    },
    {
      "type": "header",
      "content": "Content"
    },
    {
      "type": "image_picker",
      "id": "image",
      "label": "Image",
      "info": "1600 x 900px recommended"
    },
    {
      "type": "text",
      "id": "pretext",
      "label": "Preheading"
    },
    {
      "type": "text",
      "id": "title",
      "label": "Heading",
      "default": "Featured video"
    },
    {
      "type": "text",
      "id": "subtitle",
      "label": "Subheading",
      "default": "Embed a Youtube or Vimeo video."
    },
    {
      "type": "color",
      "id": "pretext_color",
      "label": "Preheading",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "heading_color",
      "label": "Heading",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "subheading_color",
      "label": "Subheading",
      "default": "#000000"
    },
    {
      "type": "select",
      "id": "horizontal_text_position",
      "label": "Horizontal position",
      "options": [
        {
          "value": "left",
          "label": "Left"
        },
        {
          "value": "center",
          "label": "Center"
        },
        {
          "value": "right",
          "label": "Right"
        }
      ],
      "default": "center"
    },
    {
      "type": "select",
      "id": "vertical_text_position",
      "label": "Vertical position",
      "options": [
        {
          "value": "start",
          "label": "Top"
        },
        {
          "value": "center",
          "label": "Middle"
        },
        {
          "value": "end",
          "label": "Bottom"
        }
      ],
      "default": "center"
    },
    {
      "type": "select",
      "id": "text_align",
      "label": "Text alignment",
      "options": [
        {
          "value": "left",
          "label": "Left"
        },
        {
          "value": "center",
          "label": "Center"
        },
        {
          "value": "right",
          "label": "Right"
        }
      ],
      "default": "center"
    },
    {
      "type": "text",
      "id": "button_label",
      "label": "Button label",
      "default": "Play video"
    },
    {
      "type": "select",
      "id": "button_style",
      "label": "Button style",
      "default": "button--secondary",
      "options": [
        {
          "value": "button--primary",
          "label": "Primary"
        },
        {
          "value": "button--secondary",
          "label": "Secondary"
        },
        {
          "value": "button--link-style",
          "label": "Link style"
        }
      ]
    },
    {
      "type": "header",
      "content": "Overlay"
    },
    {
      "type": "select",
      "id": "overlay_style",
      "label": "Overlay style",
      "default": "text_only",
      "options": [
        {
          "value": "full",
          "label": "Full"
        },
        {
          "value": "text_only",
          "label": "Text only"
        },
        {
          "value": "none",
          "label": "None"
        }
      ]
    },
    {
      "type": "color",
      "id": "video_overlay_color",
      "label": "Overlay",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "gradient",
      "label": "Gradient",
      "default": "rgba(0,0,0,0)"
    },
    {
      "type": "range",
      "id": "gradient_rotation",
      "label": "Gradient rotation",
      "min": 0,
      "max": 180,
      "default": 180,
      "unit": "deg",
      "step": 10
    },
    {
      "type": "range",
      "id": "background_opacity",
      "label": "Background opacity",
      "default": 77,
      "min": 0,
      "max": 100,
      "unit": "%"
    },
    {
      "type": "range",
      "id": "text_width",
      "label": "Text width",
      "min": 40,
      "max": 100,
      "default": 70,
      "unit": "%"
    },
    {
      "type": "header",
      "content": "Mobile"
    },
    {
      "type": "checkbox",
      "id": "mobile_text_below_video",
      "label": "Show text below image",
      "default": true
    },
    {
      "type": "color",
      "id": "pretext_color_mobile",
      "label": "Preheading",
      "default": "rgba(0,0,0,0)"
    },
    {
      "type": "color",
      "id": "heading_color_mobile",
      "label": "Heading",
      "default": "rgba(0,0,0,0)"
    },
    {
      "type": "color",
      "id": "subheading_color_mobile",
      "label": "Subheading",
      "default": "rgba(0,0,0,0)"
    },
    {
      "type": "header",
      "content": "Layout"
    },
    {
      "type": "select",
      "id": "width",
      "label": "Width",
      "default": "wide",
      "options": [
        {
          "value": "half",
          "label": "Half"
        },
        {
          "value": "standard",
          "label": "Standard"
        },
        {
          "value": "wide",
          "label": "Wide"
        }
      ]
    },
    {
      "type": "range",
      "id": "padding_top",
      "label": "Top spacing",
      "min": 0,
      "max": 80,
      "default": 20,
      "unit": "px"
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "label": "Bottom spacing",
      "min": 0,
      "max": 80,
      "default": 0,
      "unit": "px"
    },
    {
      "type": "range",
      "id": "padding_left",
      "label": "Left spacing",
      "min": 0,
      "max": 80,
      "default": 0,
      "unit": "px"
    },
    {
      "type": "range",
      "id": "padding_right",
      "label": "Right spacing",
      "default": 0,
      "min": 0,
      "max": 80,
      "unit": "px"
    },
    {
      "type": "select",
      "id": "animation",
      "label": "Animation",
      "default": "none",
      "options": [
        {
          "value": "none",
          "label": "None"
        },
        {
          "value": "fadeIn",
          "label": "Fade in"
        },
        {
          "value": "fadeInDown",
          "label": "Fade in down"
        },
        {
          "value": "fadeInLeft",
          "label": "Fade in left"
        },
        {
          "value": "fadeInRight",
          "label": "Fade in right"
        },
        {
          "value": "slideInLeft",
          "label": "Slide in left"
        },
        {
          "value": "slideInRight",
          "label": "Slide in right"
        },
        {
          "value": "zoomIn",
          "label": "Zoom in"
        }
      ]
    },
    {
      "type": "header",
      "content": "Advanced"
    },
    {
      "type": "text",
      "id": "css_class",
      "label": "CSS Class"
    },
    {
      "type": "textarea",
      "id": "custom_css",
      "label": "Custom CSS"
    }
  ],
  "presets": [{
    "name": "Video",
    "category": "Video",
    "settings": {
      "autoplay": false,
      "iframe_video": "https://www.youtube.com/watch?v=8NxS0vrPcsA",
      "button_label": "Play Video"
    }
  }]
}

{% endschema %}

[KetanKumar]

thanks code can you please share also

{% include 'include-video' %}

[GoSmoothSHOP]

This is my include-video.liquid code:

{% comment %}
  Snippet can be used in section or block
  eg. {% include 'include-video' %}
{% endcomment %}

{% comment %} Assign object as block or section {% endcomment %}
{% if type == 'block' %}
  {% assign object = block %}
{% else %}
  {% assign object = section %}
{% endif %}

{% assign id = object.id %}
{% assign aspect_ratio = object.settings.aspect_ratio %}
{% assign autoplay = object.settings.autoplay %}
{% assign autoloop = object.settings.autoloop %}
{% assign controls = object.settings.controls %}
{% assign image = object.settings.image %}
{% assign overlay_style = object.settings.overlay_style %}
{% assign overlay_color = object.settings.video_overlay_color %}
{% assign background_opacity = object.settings.background_opacity %}
{% assign overlay_background_alpha = background_opacity | divided_by: 100.00 %}
{% assign gradient = object.settings.gradient %}
{% assign gradient_rotation = object.settings.gradient_rotation %}
{% assign horizontal_text_position = object.settings.horizontal_text_position %}
{% assign vertical_text_position = object.settings.vertical_text_position %}
{% assign text_align = object.settings.text_align %}
{% assign pretext = object.settings.pretext %}
{% assign pretext_color = object.settings.pretext_color %}
{% assign title = object.settings.title %}
{% assign title_color = object.settings.heading_color %}
{% assign subtitle = object.settings.subtitle %}
{% assign subtitle_color = object.settings.subheading_color %}
{% assign button_label = object.settings.button_label %}
{% assign button_style = object.settings.button_style %}
{% assign banner_overlay_color = object.settings.banner_overlay_color %}
{% assign text_width =  object.settings.text_width %}
{% assign color = object.settings.color %}
{% assign link_color = object.settings.link_color %}
{% comment %} Mobile {% endcomment %}
{% assign mobile_text_below_media = object.settings.mobile_text_below_video %}
{% assign mobile_headline_color = object.settings.heading_color_mobile %}
{% assign mobile_preheading_color = object.settings.pretext_color_mobile %}
{% assign mobile_subtitle_color = object.settings.subheading_color_mobile %}
{% comment %}Layout{% endcomment %}
{% assign width = object.settings.width %}
{% assign padding_top = object.settings.padding_top %}
{% assign padding_bottom = object.settings.padding_bottom %}
{% assign padding_left = object.settings.padding_left %}
{% assign padding_right = object.settings.padding_right %}
{% assign animation = object.settings.animation | default: 'none' %}
{% comment %} Advanced {% endcomment %}
{% assign css_class = object.settings.css_class %}
{% assign custom_css = object.settings.custom_css %}

{% assign iframe_video = object.settings.iframe_video %}
{% assign html5_video = object.settings.html5_video %}
{% if iframe_video != blank or html5_video != blank %}
  {% assign video_exists = true %}
{% else %}
  {% assign video_exists = false %}
{% endif %}

{% comment %}Is the color set to transparent?{% endcomment %}
{% assign heading_alpha = title_color | color_extract: 'alpha' %}
{% assign preheading_alpha = pretext_color | color_extract: 'alpha' %}
{% assign subheading_alpha = subtitle_color | color_extract: 'alpha' %}
{% assign mobile_headline_alpha = mobile_headline_color | color_extract: 'alpha' %}
{% assign mobile_preheading_alpha = mobile_preheading_color | color_extract: 'alpha' %}
{% assign mobile_subtitle_alpha = mobile_subtitle_color | color_extract: 'alpha' %}
{% assign caption_border_alpha = object.settings.border_color | color_extract: 'alpha' %}


{% comment %} Section specific CSS {% endcomment %}
{%- capture section_css -%}

{% if overlay_style != 'none' %}
.overlay {
    background-image: linear-gradient({{ gradient_rotation }}deg, rgba(255,255,255,0), {{ gradient }});
    background-color: {{ overlay_color }};
    opacity: {{ overlay_background_alpha }};
  }
{% endif %}

.video__title {
  color: {% if heading_alpha != 0 %}{{ title_color }}{% else %}{{ settings.heading_color }}{% endif %};
}

.video__subtitle {
  color: {% if subheading_alpha != 0 %}{{ subtitle_color }}{% else %}{{ settings.heading_color }}{% endif %};
}

.pretext {
  color: {% if preheading_alpha != 0 %}{{ pretext_color }}{% else %}{{ settings.heading_color }}{% endif %};
}

.video__text-container .hidden {
  display: none;
}
{%- endcapture -%}

{% style %}
  {% include 'css-loop', css: section_css, id: id %}

  @media only screen and (min-width: 480px) {
    #shopify-section-{{ id }} .video__text-wrapper {
      width: {{ text_width }}%;
    }
  }

  #shopify-section-{{ id }} {
    padding-top: {{ padding_top }}px;
    padding-bottom: {{ padding_bottom }}px;
    padding-left: {{ padding_left }}px;
    padding-right: {{ padding_right }}px;
    {% if width == 'wide' %}
      width: 100%;
    {% elsif width == 'half' %}
      width: 50%;
    {% endif %}
  }

  @media only screen and (max-width: 480px) {
    #shopify-section-{{ id }} .video__title {
      color: {% if mobile_headline_alpha != 0 %}{{ mobile_headline_color}}{% endif %};
    }
    #shopify-section-{{ id }} .video__subtitle {
      color: {% if mobile_subtitle_alpha != 0 %}{{ mobile_subtitle_color}}{% endif %};
    }
    #shopify-section-{{ id }} .pretext {
      color: {% if mobile_preheading_alpha != 0 %}{{ mobile_preheading_color}}{% endif %};
    }
  }


  {% include 'css-loop', css: custom_css, id: id %}
{% endstyle %}

{% comment %} HTML markup {% endcomment %}
<section class="featured-video
                section
                {{ css_class }}
                is-width-{{ width }}
                {% if mobile_text_below_media == true %}
                  mobile-text--below-media
                  {% else %}
                  mobile-text--over-media
                {% endif %}
                {% if video_exists %} has-video-added {% endif %}
                video-controls-enabled--{{ show_controls }}"
        {% if animation != "none" %}
          data-scroll-class="{{ animation }}"
        {% endif %}>
  <div class="container
              video__container
              {% if width == 'wide' or width == 'half' %}
                equal-columns--outside-trim
              {% endif %}">
    <div class="one-whole column">
      <div class="video-wrapper overlay--{{ overlay_style }} video-present--{{ video_exists }} video-controls--{{ object.settings.controls }}">
        {% if image %}
          <div class="image-wrapper" data-image-element>
            {% include 'image-element', image: image, alt: image.alt, additional_classes: 'placeholder-img', stretch_width: true %}
          </div>
        {% else %}
          <div class="image-wrapper" data-image-element>
            {{ 'lifestyle-1' | placeholder_svg_tag: 'placeholder-svg placeholder-svg--video' }}
          </div>
        {% endif %}

        {% comment %} Checks there is an iframe video (YouTube or Vimeo) {% endcomment %}
        {% if video_exists %}
          {% if iframe_video != blank %}
            <div class="plyr__video-embed video-{{ id }}" data-video-element>
            {% if iframe_video.type == 'youtube' %}
              <iframe src="https://www.youtube.com/embed/{{ iframe_video.id }}?origin=https://plyr.io&amp;iv_load_policy=3&amp;modestbranding=1&amp;playsinline=1&amp;showinfo=0&amp;rel=0&amp;enablejsapi=1" allowfullscreen allowtransparency allow="autoplay"></iframe>
            {% elsif iframe_video.type == 'vimeo' %}
              <iframe src="https://player.vimeo.com/video/{{ iframe_video.id }}?loop=false&amp;byline=false&amp;portrait=false&amp;title=false&amp;speed=true&amp;transparent=0&amp;gesture=media" allowfullscreen allowtransparency allow="autoplay"></iframe>
            {% endif %}
            </div>
          {% elsif html5_video != blank %}
            <div class="video-element" data-video-element>
              <video class="video-{{ id }}">
                <source src="{{ html5_video }}">
              </video>
            </div>
          {% endif %}
        {% endif %}

        <div class="video__text-container" data-video-text-container>
          <div class="video__text is-justify-{{ vertical_text_position }} {% if pretext == blank and title == blank and subtitle == blank and button_label == blank %} hidden{% endif %}">
            <div class="text-outer-wrapper is-flex is-justify-{{ horizontal_text_position }}">
              <div class="video__text-wrapper text-align-{{ text_align }}">
                <div class="overlay"></div>
                {% if pretext != blank %}
                  <p class="pretext subtitle banner__subheading video__subtitle">{{ pretext }}</p>
                {% endif %}
                {% if title != blank %}
                  <h2 class="title video__title banner__heading has-small-padding-top mobile-shrink-text">
                    <span>{{ title }}</span>
                  </h2>
                {% endif %}
                {% if subtitle != blank %}
                  <p class="subtitle video__subtitle banner__subheading has-small-padding-top">{{ subtitle }}</p>
                {% endif %}
                {% if button_label != blank %}
                  <button class="button {{ button_style }}" data-play-button>{{ button_label }}</button>
                {% endif %}
              </div>
            </div>
          </div>
        </div>

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


  {% comment %} JavaScript {% endcomment %}
  <script
    type="application/json"
    data-section-id="{{ object.id }}"
    data-section-data
  >
    {
      "autoplay": {{ object.settings.autoplay | json }},
      "autoloop": {{ object.settings.autoloop | json }},
      "video_id": {{ object.settings.iframe_video.id | json }},
      "video_type": {{ object.settings.iframe_video.type | json }},
      "iframe_video": {{ object.settings.iframe_video | json }},
      "html5_video": {{ object.settings.html5_video | json }},
      "aspect_ratio": {{ object.settings.aspect_ratio | json }},
      "poster": {{ object.settings.image | json }},
      "button": {{ object.settings.button_label | json }},
      "id": {{ object.id | json }},
      "mute": {{ object.settings.mute_video | json }}
    }
  </script>
  <script data-theme-editor-load-script src="{{ 'z__jsVideo.js' | asset_url }}"></script>
</section>

[GoSmoothSHOP]

Hi @KetanKumar, can you help me fix this problem? I am willing to hire you if needed.