From 5a3b8eb5fc9027f854b1dae6751d9eacf37b807a Mon Sep 17 00:00:00 2001
From: Wilson Wong <wilwong89@gmail.com>
Date: Wed, 1 Nov 2023 11:51:07 -0700
Subject: [PATCH] feat, SC2961: Convert iframe to embed element for youtube
 video

---
 _layouts/service.html | 13 ++++++++++++-
 _sass/pages.scss      |  9 +++++++++
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/_layouts/service.html b/_layouts/service.html
index 1530cb5..a5f82ee 100644
--- a/_layouts/service.html
+++ b/_layouts/service.html
@@ -35,10 +35,21 @@ <h2 class="text-center">
   </div>
 </div>
 {% if page.youtubeEmbed %}
-<div class="container text-center mb-5">
+<!-- <div class="container text-center mb-5">
   <iframe width="600" height="337"
     src="{{ page.youtubeEmbed }}">
   </iframe>
+</div> -->
+<div class="embed-video mb-5">
+  <embed
+    src="{{ page.youtubeEmbed }}"
+    wmode="transparent"
+    type="video/mp4"
+    width="100%" height="100%"
+    allow="autoplay; encrypted-media; picture-in-picture"
+    allowfullscreen
+    title="embedded-youtube"
+  >
 </div>
 {% endif %}
 {% if page.descriptionExt and page.descriptionExt != empty %}
diff --git a/_sass/pages.scss b/_sass/pages.scss
index a393d4f..b921bf6 100644
--- a/_sass/pages.scss
+++ b/_sass/pages.scss
@@ -118,6 +118,15 @@ h2 .mascot{
   }
 }
 
+/* Style specific to the embedded youtube video of service pages */
+.embed-video {
+  width: 600px;
+  height: 337px;
+  float: none;
+  clear: both;
+  margin: 2px auto;
+}
+
 /* Style specific to the onboarding pages */
 .onboarding-content {
   .feature-card .onboard-table-desc {