diff --git a/src/patterns/04-components/banners/banners.twig b/src/patterns/04-components/banners/banners.twig
index 328b1409752777e6290da5d81805a0b1ad51c9ff..5c54d1d8f2e94b76118d11fdc26cf1c38bd5870c 100644
--- a/src/patterns/04-components/banners/banners.twig
+++ b/src/patterns/04-components/banners/banners.twig
@@ -11,6 +11,7 @@
{% block content %}
{% include '@components/card/card--banner/card--banner.twig' with {
'banners': banners,
+ 'media_flags': media_flags
} %}
{% endblock %}
diff --git a/src/patterns/04-components/card/card-elements/_banner.twig b/src/patterns/04-components/card/card-elements/_banner.twig
index 0c7c0fa01ef870074d01cc77d079c6cbb26c76b5..9d18a1275bea14cedf798013be08d454d47c7c32 100644
--- a/src/patterns/04-components/card/card-elements/_banner.twig
+++ b/src/patterns/04-components/card/card-elements/_banner.twig
@@ -29,80 +29,80 @@
{% 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" 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
- }%}
+ {% 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" 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 %}
- {% include "@components/responsive-image/responsive-image.twig" with {
- sources: image.sources,
- img_element: image.img_element,
- alt: image.alt
- }%}
+ {% 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 %}
- {% 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,
- } %}
- {% endif %}
- {% if image.big_text or image.small_text or image.other_text %}
- {% if banners.use_page_title_big_text %}
- {% if banners.text_overlay != "split" %}
- <h1 class="card__banner--title">{{ image.big_text }}</h1>
- {% endif %}
- {% else %}
- {% if banners.text_overlay != "split" %}
- {% if image.big_text %}
- <span class="card__banner--title">
- <strong>
- {{ image.big_text }}
- </strong>
- </span>
+ {% 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,
+ } %}
+ {% endif %}
+ {% if image.big_text or image.small_text or image.other_text %}
+ {% if banners.use_page_title_big_text %}
+ {% if banners.text_overlay != "split" %}
+ <h1 class="card__banner--title">{{ image.big_text }}</h1>
+ {% endif %}
+ {% else %}
+ {% if banners.text_overlay != "split" %}
+ {% if image.big_text %}
+ <span class="card__banner--title">
+ <strong>
+ {{ image.big_text }}
+ </strong>
+ </span>
+ {% endif %}
{% endif %}
{% endif %}
+ {% if image.small_text %}
+ <span class="card__banner--sub-title">
+ {{ image.small_text }}
+ </span>
+ {% endif %}
+ {% if image.other_text %}
+ <div class="card__banner--other-split">{{ image.other_text }}</div>
{% endif %}
- {% if image.small_text %}
- <span class="card__banner--sub-title">
- {{ image.small_text }}
- </span>
{% endif %}
- {% if image.other_text %}
- <div class="card__banner--other-split">{{ image.other_text }}</div>
+ {% if banners.text_overlay == "left-dark" or banners.text_overlay == "left-light" or text_overlay_class == "uw-text-overlay--none" %}
+ </div>
{% endif %}
- {% endif %}
- {% if banners.text_overlay == "left-dark" or banners.text_overlay == "left-light" or text_overlay_class == "uw-text-overlay--none" %}
</div>
{% endif %}
- </div>
- {% endif %}
{% if image.link %}
</a>
{% endif %}
- {% if image.type == "uw_para_local_video_banner" %}
+ {% if image.type == "uw_para_local_video_banner" and media_flags.use_play_pause %}
<div class="video-bottom">
<div class="controls embedded-video-controls">
<button id="btn-{{ image.uuid }}" class="banner-video-control video-control uw-video-pause" aria-label="Pause" title="Pause Video Autoplay">
diff --git a/src/patterns/04-components/card/card-elements/_media.twig b/src/patterns/04-components/card/card-elements/_media.twig
index 7754fa5e854a212f171a1fcce01c63b30e059326..7ed45cda24d85abfa071ef746405474d1c9399b5 100644
--- a/src/patterns/04-components/card/card-elements/_media.twig
+++ b/src/patterns/04-components/card/card-elements/_media.twig
@@ -2,7 +2,8 @@
{% if media.type == 'banner' %}
{% include '@components/banners/banners.twig' with {
- 'banners': media.media
+ 'banners': media.media,
+ 'media_flags': media_flags
} only %}
{% endif %}
@@ -16,7 +17,8 @@
{% if media.type == 'remote_video' %}
{% include '@components/remote-video/remote-video.twig' with {
- 'remote_video': media.media
+ 'remote_video': media.media,
+ 'media_flags': media_flags
} %}
{% endif %}
</div>