ISTWCMS-6863: Adding ofis video to ohana.

src/patterns/03-layouts/ofis/_ofis-profile.scss

@@ -25,3 +25,27 @@
     }
   }
 }
+
+.ofis-top {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  margin-bottom: 2rem;
+  justify-content: space-between;
+  width: 100%;
+
+  @media(min-width: $screen-lg) {
+    flex-direction: row;
+  }
+}
+
+.ofis-video {
+  overflow: hidden;
+  padding-top: 1rem;
+  width: 100%;
+  flex: 0 1 50%;
+
+  @media(min-width: $screen-lg) {
+    width: 50%;
+  }
+}

src/patterns/03-layouts/ofis/ofis-profile.twig

 <section class="layout layout-ofis">
   <div>
-    <div class="ofis-profile-header">
-      {% if ofis_data.profile.photo %}
-        <img alt="{{ ofis_data.profile.nickname }}" class="ofis-profile-picture" src="{{ ofis_data.profile.photo }}">
-      {% endif %}
-      <div>
-        <div class="ofis-profile-jobtitle" property="schema:jobTitle">
-          {{ ofis_data.profile.profile_job_title | join(', ') }}
-        </div>
-        {% if ofis_data.profile.profile_email %}
-          <div>{{ 'Email:'|t }} <a href="mailto:{{ ofis_data.profile.profile_email }}">{{ ofis_data.profile.profile_email }}</a>
-          </div>
-        {% endif %}
-        {% if ofis_data.profile.location %}
-          <div>{{ 'Location:'|t }} {{ ofis_data.profile.location }}</div>
-        {% endif %}
-        {% if ofis_data.profile.profile_phones %}
-          <div>{{ 'Phone:'|t }} {{ ofis_data.profile.profile_phones }}</div>
-        {% endif %}
-        {% if ofis_data.profile.personal_url %}
-          <div><a href="{{ ofis_data.profile.personal_url }}">{{ ofis_data.profile.personal_url_title }}</a></div>
+    <div class="ofis-top">
+      <div class="ofis-profile-header">
+        {% if ofis_data.profile.photo %}
+          <img alt="{{ ofis_data.profile.nickname }}"
+               class="ofis-profile-picture" src="{{ ofis_data.profile.photo }}">
         {% endif %}
-        {% if ofis_data.profile.lab_url %}
-          <div><a href="{{ ofis_data.profile.lab_url }}">{{ ofis_data.profile.lab_url_title }}</a></div>
-        {% endif %}
-        {% if ofis_data.profile.active %}
-          <div>{{ 'Status:'|t }} {{ ofis_data.profile.active }}</div>
-        {% endif %}
-        {% if ofis_data.profile.crossappointments %}
-          <div>{{ 'Faculty &amp; Department Cross-Appointments:'|t }} {{ ofis_data.profile.crossappointments|join(', ') }}</div>
+        <div>
+          <div class="ofis-profile-jobtitle" property="schema:jobTitle">
+            {{ ofis_data.profile.profile_job_title | join(', ') }}
+          </div>
+          {% if ofis_data.profile.profile_email %}
+            <div>{{ 'Email:'|t }} <a
+                href="mailto:{{ ofis_data.profile.profile_email }}">{{ ofis_data.profile.profile_email }}</a>
+            </div>
+          {% endif %}
+          {% if ofis_data.profile.location %}
+            <div>{{ 'Location:'|t }} {{ ofis_data.profile.location }}</div>
+          {% endif %}
+          {% if ofis_data.profile.profile_phones %}
+            <div>{{ 'Phone:'|t }} {{ ofis_data.profile.profile_phones }}</div>
+          {% endif %}
+          {% if ofis_data.profile.personal_url %}
+            <div><a
+                href="{{ ofis_data.profile.personal_url }}">{{ ofis_data.profile.personal_url_title }}</a>
+            </div>
+          {% endif %}
+          {% if ofis_data.profile.lab_url %}
+            <div><a
+                href="{{ ofis_data.profile.lab_url }}">{{ ofis_data.profile.lab_url_title }}</a>
+            </div>
+          {% endif %}
+          {% if ofis_data.profile.active %}
+            <div>{{ 'Status:'|t }} {{ ofis_data.profile.active }}</div>
+          {% endif %}
+          {% if ofis_data.profile.crossappointments %}
+            <div>{{ 'Faculty &amp; Department Cross-Appointments:'|t }} {{ ofis_data.profile.crossappointments|join(', ') }}</div>
+          {% endif %}
+        </div>
+      </div>
+      <div class="ofis-video">
+        {% if ofis_data.profile.video %}
+          {% set vid = ofis_data.profile.video|split('?v=')[1] %}
+          {% if vid %}
+            {% set yy = 'https://www.youtube.com/embed/' ~ vid %}
+            <iframe width="560" height="315" src="{{ yy }}"
+                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                    referrerpolicy="strict-origin-when-cross-origin"
+                    allowfullscreen></iframe>
+          {% endif %}
         {% endif %}
       </div>
     </div>