diff --git a/src/patterns/04-components/_index.scss b/src/patterns/04-components/_index.scss
index bc26c3eb42c7ac97960971dbce59b3835ea903f1..0283f310b5870b9c0ddcef19c6f04cff7ec6abfa 100644
--- a/src/patterns/04-components/_index.scss
+++ b/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';
diff --git a/src/patterns/04-components/remote-video/_remote-video.scss b/src/patterns/04-components/remote-video/_remote-video.scss
new file mode 100644
index 0000000000000000000000000000000000000000..2531592f91f96ac05d71ea27dc8dc4f317a18771
--- /dev/null
+++ b/src/patterns/04-components/remote-video/_remote-video.scss
@@ -0,0 +1,43 @@
+@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;
+      }
+    }
+  }
+}
diff --git a/src/patterns/04-components/remote-video/remote-video.twig b/src/patterns/04-components/remote-video/remote-video.twig
new file mode 100644
index 0000000000000000000000000000000000000000..e6e8518881d4908bacaf8376a0ee5a09df89ecc9
--- /dev/null
+++ b/src/patterns/04-components/remote-video/remote-video.twig
@@ -0,0 +1,12 @@
+<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>
diff --git a/src/patterns/04-components/remote-video/remote-video.yml b/src/patterns/04-components/remote-video/remote-video.yml
new file mode 100644
index 0000000000000000000000000000000000000000..1351b851788a58cf93663e3eeaffdcd541127948
--- /dev/null
+++ b/src/patterns/04-components/remote-video/remote-video.yml
@@ -0,0 +1,5 @@
+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