Video

Description

Used On

• Bundle
• Course Landing
• Site Landing

Template Markup

<section class="video" data-preview-item="video">
  <div class="container">

    <div class="section__content">

      {% if section.settings.video.frame != blank %}
        <div class="section__video">
          {{ section.settings.video.frame }}
        </div>
      {% endif %}

      <div class="section__button-group">
      {% for block in section.blocks %}
        {% if block.type == 'banner_button' %}
          <a class="button button-primary" href="{{ block.settings.button_url }}">{{ block.settings.button_text }}</a>
        {% else %}
          {% include 'product_action_buttons' %}
        {% endif %}
      {% endfor %}
      </div>

    </div>

  </div>
</section>

{% style %}
...
{% endstyle %}

{% schema %}
...
{% schema %}

Style

Alignment, Layout & Style modifiers will be encapsulated with {% style %} & {% endstyle %} tags.

section.video {

  $background-overlay-color: {{ section.settings.overlay_color }};
  $background-overlay-opacity: {{ section.settings.overlay_opacity }} * 0.01;

  @if $background-overlay-opacity {
    $background: (rgba($background-overlay-color, $background-overlay-opacity));
  }

  .section__content {
    &:after {
      content: "";
      background: $background;
    }
  }
}

Schema

Schema will be encapsulated with {% schema %} & {% endschema %} tags.

{
  "label": "Video",
  "settings": [
    {
      "label": "Video",
      "settings": [
        {
          "type": "video",
          "id": "video",
          "label": "",
          "default": {
            "id": false,
            "type": "",
            "url": "",
            "identifier": "",
            "frame": "",
            "popover": "",
            "oembed": false
          }
        }
      ]
    },
    {
      "label": "Background Overlay",
      "settings": [
        {
          "type": "color",
          "id": "overlay_color",
          "label": "Overlay Color",
          "default": "#D9DEE2"
        },
        {
          "type": "number",
          "id": "overlay_opacity",
          "label": "Overlay Opacity",
          "default": 0,
          "min": 0,
          "max": 100
        }
      ]
    }
  ]
}