Merge pull request #759 from GSA/staging

Staging
GSA · Feb 12, 2025 · 8340e58 · 8340e58
2 parents 49d891d + 16af240
commit 8340e58
Show file tree

Hide file tree

Showing 6 changed files with 82 additions and 4 deletions.
diff --git a/_pages/m3/m3.md b/_pages/m3/m3.md
@@ -93,18 +93,53 @@ description: The Playbook provides tools, templates, and best practices for fede
     </div>
 </section>
 
-<section class="m3-playbook m3-playbook-overview">
+<section id="m3videos" class="m3-playbook m3-playbook-overview">
     <div class="grid-container">
         <div class="grid-row grid-gap all-std">
             <div class="grid-col-12 desktop:grid-col m3-playbook-left">
                 <h2>What is the M3 Playbook?</h2>
                 <p>The Playbook consists of guidance and tools to help agencies plan for and navigate modernization projects. It was developed based on feedback from over 100 Government and industry experts, reflects best practices and lessons learned from prior agency and industry modernizations. It is updated annually.</p>
                 <a href="{{site.baseurl}}/assets/files/M3-Playbook.pdf" class="m3-download-pdf">Download PDF</a>
-                <div style="padding:56.25% 0 0 0;position:relative; margin-top:30px;"><iframe src="https://player.vimeo.com/video/704934121?h=437ef4784d&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;" title="M3-Playbook Video"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
-                <p><i>Move Your Agency Forward with M3</i></p>
+                <div id="main-video-container" style="padding:56.25% 0 0 0; position:relative; margin-top:30px;">
+                    <iframe id="main-video" 
+                            src="https://player.vimeo.com/video/704934121?h=437ef4784d&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" 
+                            frameborder="0" 
+                            allow="autoplay; fullscreen; picture-in-picture" 
+                            allowfullscreen 
+                            style="position:absolute; top:0; left:0; width:100%; height:100%;" 
+                            title="M3-Playbook Video">
+                    </iframe>
+                    <br>
+                    <p id="videoTitle" style="color:blue; text-align:center;"><i>Move your Agency Forward with M3</i></p>
+                </div>
             </div>
             <div class="grid-col-12 desktop:grid-col m3-playbook-right text-base-lightest">
-                <img src="{{site.baseurl}}/assets/images/shutterstock_747951901-1024x683.webp" width="600" class="shutterstock-image" alt="shutterstock image">
+                <div class="video-thumbnails" style="margin-top:30px;">
+                    <figure class="thumbnail" style="display:inline-block; text-align:center; margin:10px;">
+                        <img class="video-thumbnail" 
+                            data-video-src="https://player.vimeo.com/video/704934121?h=437ef4784d&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" 
+                            src="{{ site.baseurl }}/assets/images/m3/M3-thumbnail1.jpeg" 
+                            alt="M3-Playbook Video Thumbnail" 
+                            style="cursor:pointer; width:100%; max-width:400px; margin-bottom: 10px;">
+                        <figcaption style="color:blue;"><i>M3 Playbook for Agency Modernization</i></figcaption>
+                    </figure>
+                    <figure class="thumbnail" style="display:inline-block; text-align:center; margin:10px;">
+                        <img class="video-thumbnail" 
+                            data-video-src="https://player.vimeo.com/video/677308076?h=f71d457043&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" 
+                            src="{{ site.baseurl }}/assets/images/m3/M3-thumbnail2.jpeg"
+                            alt="M3 Framework Video Thumbnail" 
+                            style="cursor:pointer; width:100%; max-width:400px; margin-bottom: 10px;">
+                        <figcaption style="color:blue;"><i>Agency Modernization Workstreams</i></figcaption>
+                    </figure>
+                    <figure class="thumbnail" style="display:inline-block; text-align:center; margin:10px;">
+                        <img class="video-thumbnail" 
+                            data-video-src="https://player.vimeo.com/video/720261803?h=ddd231c12c&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" 
+                            src="{{ site.baseurl }}/assets/images/m3/M3-thumbnail3.jpeg"
+                            alt="Modernization Phases Video Thumbnail" 
+                            style="cursor:pointer; width:100%; max-width:400px; margin-bottom: 10px;">
+                        <figcaption style="color:blue;"><i>Agency Modernization Phases</i></figcaption>
+                    </figure>
+                </div>
             </div>
         </div>
     </div>

diff --git a/_sass/_m3.scss b/_sass/_m3.scss
@@ -106,6 +106,26 @@
   }
 }
 
+.m3-playbook-left {
+  width: 70%; 
+}
+
+.m3-playbook-right {
+  width: 30%; 
+}
+
+.m3-playbook-right iframe {
+  width: 100%;
+  height: 120px; 
+  margin-bottom: 15px;
+  cursor: pointer;
+  transition: transform 0.3s ease-in-out;
+}
+
+.m3-playbook-right iframe:hover {
+  transform: scale(1.05);
+}
+
 // @media screen and (min-width: 640px) {
 //   .tablet\:width-1\/3 {
 //     width: 33%;

diff --git a/assets/images/m3/M3-thumbnail1.jpeg b/assets/images/m3/M3-thumbnail1.jpeg
diff --git a/assets/images/m3/M3-thumbnail2.jpeg b/assets/images/m3/M3-thumbnail2.jpeg
diff --git a/assets/images/m3/M3-thumbnail3.jpeg b/assets/images/m3/M3-thumbnail3.jpeg
diff --git a/assets/js/m3.js b/assets/js/m3.js
@@ -43,4 +43,27 @@ document.querySelectorAll('.filterlist').forEach(function(filterlist) {
 			}
 		});
 	});
+});
+
+
+document.addEventListener("DOMContentLoaded", function () {
+    let mainVideo = document.getElementById("main-video");
+    let videoTitle = document.getElementById("videoTitle");
+    let videoThumbnails = document.querySelectorAll(".video-thumbnail");
+
+    videoThumbnails.forEach(thumbnail => {
+        thumbnail.addEventListener("click", function (event) {
+            event.preventDefault();
+            let newSrc = this.getAttribute("data-video-src");
+
+            if (!newSrc.includes("autoplay=1")) {
+                newSrc = newSrc.includes("?") ? `${newSrc}&autoplay=1` : `${newSrc}?autoplay=1`;
+            }
+            mainVideo.setAttribute("src", newSrc);
+            let figcaption = this.parentElement.querySelector("figcaption");
+            if (figcaption && videoTitle) {
+                videoTitle.innerHTML = figcaption.innerHTML;
+            }
+        });
+    });
 });