Merge branch 'feature/ISTWCMS-6863-ibiki-ofis_video' into '1.1.x'

ISTWCMS-6863: Adding ofis video to ohana.

See merge request !227

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

@@ -6,7 +6,7 @@
 
 .ofis-profile-header {
   display: flex;
-  flex-direction: column;
+  flex-wrap: wrap;
   gap: 1rem;
   padding-top: 1rem;
 
@@ -15,7 +15,11 @@
     width: 188px;
     height: auto;
     margin: 0 auto;
-    flex-shrink: 0;
+    flex: 0 0 188px;
+  }
+
+  > div {
+    flex: 1 1 250px;
   }
 
   @media(min-width: $screen-xs) {

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

-<section class="layout layout-ofis">
+<section class="uw-contained-width uw-section-spacing--default uw-section-separator--none uw-column-separator--none layout {% if ofis_data.profile.video %}layout--uw-2-col even-split{% else %}layout--uw-1-col{% endif %}">
   <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 }}">
+        <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>{{ 'Email:'|t }} <a
+              href="mailto:{{ ofis_data.profile.profile_email }}">{{ ofis_data.profile.profile_email }}</a>
           </div>
         {% endif %}
         {% if ofis_data.profile.location %}
@@ -19,10 +21,14 @@
           <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><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>
+          <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>
@@ -32,6 +38,36 @@
         {% endif %}
       </div>
     </div>
+  </div>
+  {% if ofis_data.profile.video %}
+    <div>
+      <div class="uw-remote-video">
+        {% set vid = ofis_data.profile.video|split('?v=')[1] %}
+        {% if not vid %}
+          {% set vid = ofis_data.profile.video|split('https://youtu.be/')[1] %}\
+        {% endif %}
+        {% if vid %}
+          {% set ytembed = 'https://www.youtube.com/embed/' ~ vid %}
+          <div class="uw-remote-video__video">
+            <div class="uw-media media media--type-uw-mt-remote-video media--view-mode-default">
+              <div class="uw-field uw-field--name-field-media-oembed-video uw-field--type-string uw-field--label-visually_hidden uw-field__items">
+                <div class=uw-field__item">
+                  <iframe class="media-oembed-content" width="200" height="113" src="{{ ytembed }}" aria-label="Remote Video"></iframe>
+                </div>
+              </div>
+            </div>
+          </div>
+        {% endif %}
+        <div class="uw-remote-video__view">
+          <a href="https://www.youtube.com/watch?v={{ vid }}">View on YouTube</a>
+        </div>
+      </div>
+    </div>
+  {% endif %}
+</section>
+
+<section class="uw-contained-width uw-section-spacing--default uw-section-separator--none uw-column-separator--none layout layout--uw-1-col">
+  <div>
     {% if ofis_data.profile.profile_bio %}
       <h2>{{ 'Biography'|t }}</h2>
       <div>{{ ofis_data.profile.profile_bio | striptags('<a>') | raw | nl2br }}</div>