diff --git a/apps/pattern-lab/src/_patterns/02-components/video/50-video-w-external-title.twig b/apps/pattern-lab/src/_patterns/02-components/video/50-video-w-external-title.twig index 749ebfae2f..063158283d 100644 --- a/apps/pattern-lab/src/_patterns/02-components/video/50-video-w-external-title.twig +++ b/apps/pattern-lab/src/_patterns/02-components/video/50-video-w-external-title.twig @@ -18,7 +18,10 @@ "accountId": "1900410236", "playerId": "r1CAdLzTW", "showMeta": true, - "showMetaTitle": false + "showMetaTitle": false, + "attributes": { + "class": "u-bolt-margin-bottom-small" + } } only %}
{% include "@bolt/text.twig" with { diff --git a/packages/components/bolt-video/src/video.twig b/packages/components/bolt-video/src/video.twig index dbfa5da097..3dbb7e5a3c 100644 --- a/packages/components/bolt-video/src/video.twig +++ b/packages/components/bolt-video/src/video.twig @@ -1,5 +1,5 @@ {% if enable_json_schema_validation %} - {{ validate_data_schema(bolt.data.components['@bolt-components-video'].schema, _self) | raw }} + {{ validate_data_schema(bolt.data.components["@bolt-components-video"].schema, _self) | raw }} {% endif %} {% set videoUuid = videoUuid | default("js-bolt-video-uuid--" ~ random()) %} @@ -12,23 +12,31 @@ {% set collapsed = collapsed | default(true) %} {% set ratio = ratio ?? true %} -{#@todo @salem Is this used anywhere?#} {% set classes = [ baseClass, collapsed is not null and collapsed == false ? "is-expanded" : "is-collapsed" ] %} - -{% set videoTag %} - {% include "@bolt/_video-tag.twig" %} -{% endset %} - {% if ratio == true %} + {# Move utility classes to a separate attributes object so they can be added to the wrapping ratio object instead #} + {% set ratioAttributes = create_attribute({}) %} + {% for class in attributes["class"] %} + {% if class starts with "u-" %} + {% set ratioAttributes = ratioAttributes.addClass(class) %} + {% set attributes = attributes.removeClass(class) %} + {% endif %} + {% endfor %} + + {% set innerVideo %} + {% include "@bolt/_video-tag.twig" %} + {% endset %} + {% include "@bolt/ratio.twig" with { aspectRatioHeight: aspectRatioHeight ?? 9, aspectRatioWidth: aspectRatioWidth ?? 16, - children: videoTag + children: innerVideo, + attributes: ratioAttributes } only %} {% else %} - {{ videoTag }} + {% include "@bolt/_video-tag.twig" %} {% endif %}