Merge branch 'feature/ISTWCMS-7251-kpaxman-video_titles' into '1.1.x'

istwcms-7251 add video titles

See merge request !256

src/patterns/04-components/remote-video/_remote-video.scss

 @use '../../01-core' as *;
 
 .uw-remote-video {
-  height: 0;
-  margin-bottom: var(--size-4);
-  padding-bottom: 56.25%; /* 16:9 */
-  padding-top: var(--size-3);
-  position: relative;
-  width: 100%;
-  .uw-video-wrapper & {
-    height: inherit;
-    margin-bottom: inherit;
-    //padding-bottom: inherit;
-    padding-top: inherit;
-  }
-  &__video {
-    height: 100%;
-    left: 0;
-    position: absolute;
-    top: 0;
+  .uw-field__item {
     width: 100%;
-
-    .media-oembed-content {
-      height: 100%;
-      left: 0;
-      position: absolute;
-      top: 0;
+    aspect-ratio: 16 / 9;
+    iframe {
       width: 100%;
+      height: 100%;
     }
   }
+  &__video--tall .uw-field__item {
+    aspect-ratio: 9 / 16;
+  }
 
   &__view {
-    position: absolute;
+    padding-top: 0.25rem;
     text-align: center;
-    top: 100%;
-    width: 100%;
 
     a {
       font-family: var(--font-systemmedium);

src/patterns/04-components/remote-video/remote-video.twig

 <div class="uw-remote-video">
-  <div class="uw-remote-video__video">
+  <div class="uw-remote-video__video{% if remote_video.view.type == 'YouTube short' %} uw-remote-video__video--tall{% endif %}">
     {{ remote_video.video }}
   </div>
   <div class="uw-remote-video__view">
     {% if remote_video.view.type == 'Generic' %}
-      <a href="{{ remote_video.view.url }}">{{ 'View video at'|t }} {{ remote_video.view.url }}</a>
+      <a href="{{ remote_video.view.url }}">{{ 'View video "@title"'|t({'@title': remote_video.view.title}) }}</a>
     {% elseif remote_video.view.type == 'YouTube playlist' %}
-      <a href="{{ remote_video.view.url }}">{{ 'View playlist on YouTube'|t }}</a>
+      <a href="{{ remote_video.view.url }}">{{ 'View playlist "@title" on YouTube'|t({'@title': remote_video.view.title}) }}</a>
+    {% elseif remote_video.view.type == 'YouTube short' %}
+      <a href="{{ remote_video.view.url }}">{{ 'View short "@title" on YouTube'|t({'@title': remote_video.view.title}) }}</a>
     {% else %}
-      <a href="{{ remote_video.view.url }}">{{ 'View on'|t }} {{ remote_video.view.type }}</a>
+      <a href="{{ remote_video.view.url }}">{{ 'View "@title" on'|t({'@title': remote_video.view.title}) }} {{ remote_video.view.type }}</a>
     {% endif %}
   </div>
 </div>