From cda7dc3843096666cf0547dd966a4af4bc7b7a5a Mon Sep 17 00:00:00 2001
From: Eric Bremner <ebremner@uwaterloo.ca>
Date: Thu, 4 Aug 2022 15:53:20 -0400
Subject: [PATCH] ISTWCMS-5724: adding remote video
---
src/patterns/04-components/_index.scss | 1 +
.../remote-video/_remote-video.scss | 43 +++++++++++++++++++
.../remote-video/remote-video.twig | 12 ++++++
.../remote-video/remote-video.yml | 5 +++
4 files changed, 61 insertions(+)
create mode 100644 src/patterns/04-components/remote-video/_remote-video.scss
create mode 100644 src/patterns/04-components/remote-video/remote-video.twig
create mode 100644 src/patterns/04-components/remote-video/remote-video.yml
diff --git a/src/patterns/04-components/_index.scss b/src/patterns/04-components/_index.scss
index bc26c3eb..0283f310 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 00000000..2531592f
--- /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 00000000..e6e85188
--- /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 00000000..1351b851
--- /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
--
GitLab