_banner.twig

{% if not banners.text_overlay %}
  {% set text_overlay_class = 'uw-text-overlay--full-width' %}
{% else %}
  {% if image.big_text or image.small_text or image.other_text or image.tag %}
    {% set text_overlay_class = 'uw-text-overlay--' ~ banners.text_overlay %}
  {% else %}
    {% set text_overlay_class = 'uw-text-overlay--none' %}
  {% endif %}
{% endif %}

<div class="card__banner--image {{ text_overlay_class }}">
  {% if image.link %}
    <a href="{{ image.link }}">
  {% endif %}
    <!--If banner text overlay is split then always show
   the H1 in the top white bar. -->
   {% if banners.text_overlay == "split" %}
     {% set text_overlay_big = "true" %}
      {% if image.big_text or image.header_text %}
        <div class="card__banner--page-title">
          <h1 class="card__banner--text-split">
            {% if banners.use_page_title_big_text %}
            {{ image.header_text }}
            {% else %}
            {{ image.big_text }}
            {% endif %}
          </h1>
        </div>
      {% endif %}
  {% endif %}
	<div class="card__banner--media">
    {% if image.type == "uw_para_local_video_banner" %}
      <div id="{{ image.uuid }}" class="uw-video-wrapper {{ image.type }}">
        <video id="video-{{ image.uuid }}" aria-label="video" muted="1" loop="1" class="video-{{ image.uuid }}" autoplay="1" playsinline="1" poster="{{ image.img_element }}" width="100%">
          <source src="{{ image.video }}"  type="video/mp4" />
          Your browser does not support the video tag.
        </video>
      </div>
    {% elseif image.type == "uw_para_vimeo_video_banner" %}
      <div id="{{ banners.uuid }}" class="uw-video-wrapper {{ image.type }}">
        {% set remote_video = {'video': image.video} %}
        {% include '@components/remote-video/remote-video.twig' with {
          remote_video: remote_video
        } %}
      </div>
    {% else %}
      {% if listing_image.img_element %}
        {% include "@components/responsive-image/responsive-image.twig" with {
          sources: image.sources,
          img_element: listing_image.img_element,
          alt: listing_image.alt
        }%}
      {% else %}
        {% include "@components/responsive-image/responsive-image.twig" with {
          sources: image.sources,
          img_element: image.img_element,
          alt: image.alt
        }%}
      {% endif %}
    {% endif %}
  </div>
  {% if not text_overlay_big or image.small_text or image.other_text or image.tag %}
    <div class="card__banner--caption {{ image.type }}">
      {% if banners.text_overlay == "left-dark" or banners.text_overlay == "left-light" or text_overlay_class == 'uw-text-overlay--none' %}
        <div class="card__banner--text-align">
        {% endif %}
        {% if image.tag %}
          {% include '@components/tag-list/tag-list.twig' with {
            'items': image.tag,
          } %}