kajabi-video-example.liquid

{% assign v              = current_site.find_video[section.settings.video] %}
{% assign v-Image        = section.settings.image | image_picker_url: 'video.png' %}
{% assign v-Auto         = section.settings.autoplay %}
{% assign v-Color        = section.settings.video_color %}
{% assign v-EndEdit      = section.settings.end_cta_edit %}
{% assign v-EndShow      = section.settings.end_cta %}
{% assign v-EndOverlay   = section.settings.end_background %}
{% assign v-EndText      = section.settings.end_text %}
{% assign v-EndTextColor = section.settings.end_text_color %}
{% assign v-EndDismiss   = section.settings.end_dismiss %}

<style>
  .video--{{ v.wistia_id }} .video__wrapper {
    {% unless v-Auto %}
      background-image: url({{ v-Image }});
    {% endunless %}
  }
  .video--{{ v.wistia_id }} .overlay {
    background: {{ v-EndOverlay }};
  }
  .video--{{ v.wistia_id }} .overlay__inner, 
  .video--{{ v.wistia_id }} .overlay__inner h1, 
  .video--{{ v.wistia_id }} .overlay__inner h2, 
  .video--{{ v.wistia_id }} .overlay__inner h3, 
  .video--{{ v.wistia_id }} .overlay__inner h4, 
  .video--{{ v.wistia_id }} .overlay__inner h5, 
  .video--{{ v.wistia_id }} .overlay__inner h6 {
    color: {{ v-EndTextColor }};
  }
  {% if v-EndEdit %}
    {% if editor %}
      .video--{{ v.wistia_id }} .overlay {
        display: block;
      }
    {% endif %}
  {% endif %}
</style>

    <div class="video video--{{ v.wistia_id }}" kjb-settings-id="{{ kjb-Video }}">
            <div class="video__wrapper">
              {% if v %}
                {{ v | wistia_video: player_color: v-Color, auto_play: v-Auto, still_url: v-Image, playerPreference: "html5" }}
              {% else %}
                <img src="{{ v-Image }}" class="img-fluid" kjb-settings-id="{{ kjb-Video }}"/>
              {% endif %}
            </div>
            {% if v-EndShow %}
              <div class="overlay overlay--{{ v.wistia_id }}">
                <div class="overlay__inner">
                  <h2>{{ v-EndText }}</h2>
                  {% for block in section.blocks %}
                    {% include "cta_block" %}
                  {% endfor %}
                  <a class="overlay__close">{{ v-EndDismiss }}</a>
                </div>
              </div>
            {% endif %}
          </div>

{% schema %}
  {
    "name": "Video",
    "elements": [
      {
        "type": "text",
        "id": "heading",
        "label": "Heading",
        "default": "Video"
      },
      {
        "type": "checkbox",
        "label": "Autoplay",
        "id": "autoplay",
        "default": "false"
      },
      {
        "type": "video",
        "id": "video",
        "label": "Video"
      },
      {
        "type": "image_picker",
        "id": "image",
        "label": "Image",
        "info": "Suggested dimensions: 1856 × 1044"
      },
      {
        "type": "header",
        "content": "Video End CTA",
        "style": "subheading"
      },
      {
        "type": "checkbox",
        "label": "Edit CTA Message",
        "id": "end_cta_edit",
        "default": "false",
        "info": "This is for editing purposes only. Uncheck this before going live. Will only show when video is uploaded."
      },
      {
        "type": "checkbox",
        "label": "Show CTA Message At Video End",
        "id": "end_cta",
        "default": "false"
      },
      {
        "type": "textarea",
        "id": "end_text",
        "label": "End CTA Text",
        "default": "This is a great place to put your CTA that you have been building towards in your video."
      },
      {
        "type": "text",
        "id": "end_dismiss",
        "label": "End CTA Dismiss Text",
        "default": "DISMISS MESSAGE"
      },
      {
        "type": "color",
        "id": "end_background",
        "label": "End CTA Background Color",
        "allow_blank": true
      },
      {
        "type": "color",
        "id": "end_text_color",
        "label": "End CTA Text Color",
        "allow_blank": true
      }
    ],
    "presets": [
      {
        "name": "Video",
        "description": "Upload a video to show case your brand or product.",
        "category": "Content"
      }
    ]
  }
{% endschema %}