feat, SC2961: Convert iframe to embed element for youtube video

bcgov · Nov 1, 2023 · 5a3b8eb · 5a3b8eb
1 parent 4ab9581
commit 5a3b8eb
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 1 deletion.
diff --git 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
@@ -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 {