ISTWCMS-5724: adding remote video

src/patterns/04-components/_index.scss

@@ -35,6 +35,7 @@
 @forward 'mobile-menu/mobile-menu';
 @forward 'mobile-menu-button/mobile-menu-button';
 @forward 'multi-type-list/multi-type-list';
+@forward 'remote-video/remote-video';
 @forward 'search/search';
 @forward 'search/search--wcms-headerbar/search--wcms-headerbar';
 @forward 'site-logo/site-logo';

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%;
+
+  &__video {
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+
+    .media-oembed-content {
+      height: 100%;
+      left: 0;
+      position: absolute;
+      top: 0;
+      width: 100%;
+    }
+  }
+
+  &__view {
+    position: absolute;
+    text-align: center;
+    top: 100%;
+    width: 100%;
+
+    a {
+      font-family: var(--font-systemmedium);
+      font-size: var(--font-size-0);
+      text-decoration: underline;
+
+      &:hover {
+        text-decoration: none;
+      }
+    }
+  }
+}

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

+<div class="uw-remote-video">
+  <div class="uw-remote-video__video">
+    {{ 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 {{ remote_video.view.url }}</a>
+    {% else %}
+      <a href="{{ remote_video.view.url }}">View on {{ remote_video.view.type }}</a>
+    {% endif %}
+  </div>
+</div>

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

+remote_video:
+  video: '<iframe width="560" height="315" src="https://www.youtube.com/embed/ZZQXj7K-_1M" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>'
+  view:
+    type: YouTube
+    url: https://www.youtube.com/watch?v=ZZQXj7K-_1M&pp=QAA%3D