uiowa · bspeare · Nov 14, 2022 · Jan 27, 2023 · Feb 28, 2023 · Mar 10, 2023
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@uiowa/uids",
-  "version": "3.6.18",
+  "version": "3.6.19",
   "description": "The UIowa Design System is specific to the University of Iowa.",
   "keywords": [
     "uiowa",

diff --git a/src/assets/images/play.png b/src/assets/images/play.png
diff --git a/src/assets/scss/uids.scss b/src/assets/scss/uids.scss
@@ -51,5 +51,5 @@ $imgpath: '../../assets/images';
 'stat/stat.scss',
 'tables/tables.scss',
 'tabs/tabs.scss',
-'video/vertical/vertical',
+'vertical-video/vertical.scss',
 'video/video-utilities/video-utilities';
diff --git a/src/components/vertical-video/vertical-video--basic.twig b/src/components/vertical-video/vertical-video--basic.twig
@@ -0,0 +1 @@
+
diff --git a/...onents/video/vertical/vertical.config.yml → .../vertical-video/vertical-video.config.yml b/...onents/video/vertical/vertical.config.yml → .../vertical-video/vertical-video.config.yml
@@ -1,10 +1,11 @@
-title: Portraits Block
-hidden: true
+title: Vertical Video
+hidden: false
 order: 3
 status: wip
 variants:
   - name: default
     label: Portraits Block
+    hidden: false
     status: null
     context:
       portrait:
@@ -27,6 +28,6 @@ variants:
 
   - name: basic
     label: Portraits Block Basic
-    hidden: true
+    hidden: false
 
 
diff --git a/src/components/vertical-video/vertical-video.twig b/src/components/vertical-video/vertical-video.twig
@@ -0,0 +1,42 @@
+<div class="portrait__bg">
+  <div class="portrait__wrapper">
+    <ul class="portrait__container">
+      <li class="portrait">
+        <div class="portrait__item">
+          <div class="highlight__wrapper">
+            <h3 class="highlight__title">
+              <span class="headline__heading">"My communication skills have grown so much since coming here."</span>
+            </h3>
+          </div>
+          <div class="embed-responsive embed-responsive-9by16">
+            <div class="youtube-player" data-id="KBSqfjfhHp0"></div>
+          </div>
+        </div>
+      </li>
+      <li class="portrait">
+        <div class="portrait__item">
+          <div class="highlight__wrapper">
+            <h3 class="highlight__title">
+              <span class="headline__heading">"My communication skills have grown so much since coming here."</span>
+            </h3>
+          </div>
+          <div class="embed-responsive embed-responsive-9by16">
+            <div class="youtube-player" data-id="maLqE1na-5Q"></div>
+          </div>
+        </div>
+      </li>
+      <li class="portrait">
+        <div class="portrait__item">
+          <div class="highlight__wrapper">
+            <h3 class="highlight__title">
+              <span class="headline__heading">"My communication skills have grown so much since coming here."</span>
+            </h3>
+          </div>
+          <div class="embed-responsive embed-responsive-9by16">
+            <div class="youtube-player" data-id="ibbNN201oDA"></div>
+          </div>
+        </div>
+      </li>
+    </ul>
+  </div>
+</div>
diff --git a/src/components/vertical-video/vertical.js b/src/components/vertical-video/vertical.js
@@ -0,0 +1,36 @@
+/*
+   * Light YouTube Embeds by @labnol
+   * Credit: https://www.labnol.org/
+   */
+
+function labnolIframe(div) {
+  var iframe = document.createElement('iframe');
+  iframe.setAttribute('src', 'https://www.youtube.com/embed/' + div.dataset.id + '?autoplay=1&controls=1&modestbranding=1&rel=0&showinfo=0');
+  iframe.setAttribute('frameborder', '0');
+  iframe.setAttribute('allowfullscreen', '1');
+  iframe.setAttribute('allow', 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture');
+  div.parentNode.replaceChild(iframe, div);
+
+
+}
+
+function initYouTubeVideos() {
+  var playerElements = document.querySelectorAll('.youtube-player');
+  for (var n = 0; n < playerElements.length; n++) {
+    var videoId = playerElements[n].dataset.id;
+    var div = document.createElement('div');
+    div.setAttribute('data-id', videoId);
+    var thumbNode = document.createElement('img');
+    thumbNode.src = '//i.ytimg.com/vi/ID/maxresdefault.jpg'.replace('ID', videoId);
+    div.appendChild(thumbNode);
+    var playButton = document.createElement('div');
+    playButton.setAttribute('class', 'play');
+    div.appendChild(playButton);
+    div.onclick = function () {
+      labnolIframe(this);
+    };
+    playerElements[n].appendChild(div);
+  }
+}
+
+document.addEventListener('DOMContentLoaded', initYouTubeVideos);
diff --git a/src/components/video/vertical/_vertical.scss → src/components/vertical-video/vertical.scss b/src/components/video/vertical/_vertical.scss → src/components/vertical-video/vertical.scss
@@ -1,3 +1,6 @@
+@import '../../assets/scss/variables';
+@import '../../assets/scss/utilities';
+
 .portrait {
   @include flexbox;
   @include flex-wrap($value: wrap);
@@ -83,13 +86,28 @@
     justify-content: left;
     font-size: 1rem;
     filter: opacity(0.75);
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 8px;
+    padding: 2px 0;
+    text-transform: uppercase;
+    font-family: Antonio,Antonio-fallback,sans-serif;
+    -webkit-font-smoothing: auto;
+    -moz-osx-font-smoothing: auto;
+    font-size: calc(100% - .7vw);
+    line-height: 1.7;
 
     @include breakpoint(page-container) {
       font-size: 1.1rem;
     }
 
     span {
-
+      display: inline;
+      padding: 0.45rem 1rem;
+      color: #fff;
+      background: black;
+      box-decoration-break: clone;
+      -webkit-box-decoration-break: clone;
       @include breakpoint(sm) {
         display: inline;
       }
@@ -103,14 +121,15 @@
   }
 
   .highlight__wrapper {
-    display: block;
+    display: none;
     pointer-events: none;
     text-align: left;
     position: absolute;
     padding: $md;
     right: 0;
     top: 0;
     left: 0;
+    z-index: 1;
 
     &.active {
       display: none;
@@ -244,5 +263,87 @@
 
   .embed-responsive-9by16 {
     padding-bottom: 177.78%;
+    aspect-ratio: 9/16;
   }
 }
+
+
+/*
+ * Light YouTube Embeds by @labnol
+ * Credit: https://www.labnol.org/
+ * Video title oauth added by @kmhelander
+ */
+
+//.youtube-player {
+//  position: relative;
+//  aspect-ratio: 16 / 9;  /* Modern browsers https://caniuse.com/mdn-css_properties_aspect-ratio */
+//  width: 100%;
+//  overflow: hidden;
+//  background: #000;
+//  margin: 5px;
+//}
+//
+//.youtube-player iframe {
+//  position: absolute;
+//  top: 0;
+//  left: 0;
+//  width: 100%;
+//  height: 100%;
+//  z-index: 100;
+//  background: transparent;
+//}
+
+/* Poster image */
+.youtube-player img {
+  object-fit: cover;
+  display: block;
+  left: 0;
+  bottom: 0;
+  margin: auto;
+  max-width: 100%;
+  width: 100%;
+  position: absolute;
+  right: 0;
+  top: 0;
+  border: none;
+  height: auto;
+  cursor: pointer;
+  transition: 0.4s all;
+  //padding-bottom: 177.78%;
+  position: relative;
+  display: block;
+  width: 100%;
+  padding: 0;
+  overflow: hidden;
+  cursor: pointer;
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.youtube-player img:hover {
+  -webkit-filter: brightness(75%);
+}
+
+/* Play button on poster image */
+.youtube-player .play {
+  height: 114px;
+  width: 114px;
+  left: 50%;
+  margin-top: 100%;
+  position: relative;
+  background: url('../../assets/images/play.png') no-repeat;
+  cursor: pointer;
+  transform: translate(-50%, -50%);   /* Responsive... */
+}
+
+.youtube-player .videotitle {
+  position: absolute;
+  font-size: clamp(0.9rem, 2vw, 1.3rem);
+  color: white;
+  text-shadow: 1px 1px black;
+  left: 10px;
+  top: 10px;
+}
diff --git a/src/components/video/vertical/vertical--basic.twig b/src/components/video/vertical/vertical--basic.twig
diff --git a/src/components/video/vertical/vertical.js b/src/components/video/vertical/vertical.js
diff --git a/src/components/video/vertical/vertical.twig b/src/components/video/vertical/vertical.twig
diff --git a/src/components/video/video.config.yml b/src/components/video/video.config.yml
@@ -1,4 +1,4 @@
 title: Video
 order: 0
 collate: false
-hidden: true
+hidden: false