Staging

_config.yml

@@ -205,6 +205,10 @@ primary_navigation:
           link: true
           external: false
           sub: true
+        - text: 'Mail Operations Management'
+          permalink: /fibf-mom/
+          show_in_menu: true
+          show_in_footer: false
         - text: 'Real Property Management'
           permalink: /fibf-RPM/
           show_in_menu: true
@@ -237,10 +241,6 @@ primary_navigation:
           permalink: /fibf-its/
           show_in_menu: true
           show_in_footer: false
-        - text: 'Mail Operations Management'
-          permalink: /fibf-mom/
-          show_in_menu: true
-          show_in_footer: false
         - text: 'Regulation Management'
           permalink: /fibf-rm/
           show_in_menu: true

_includes/side-nav.html

@@ -311,7 +311,17 @@
 
                         </li>
 
-
+                        <li class="usa-sidenav__item bs" style="margin-bottom: 5px;">
+                            <a style="outline:none"
+                               class="usa-nav__link{% if page.permalink contains 'fibf-mom' %} usa-current-1{% endif %}"
+                               href="{{site.baseurl}}/fibf-mom/">
+                                <div class="image-txt-container">
+                                    <div class="img-wrap"><img src="../assets/images/fibf/icons/mail.svg" class="sidebar-logo"
+                                         alt="mail icon white"></div>
+                                    <span>Mail Operations Management</span>
+                                </div>
+                            </a>
+                        </li>
 
                         <li class="usa-sidenav__item bs" style="margin-bottom: 5px;">
                             <a style="outline:none"
@@ -385,17 +395,6 @@
                             </a>
                         </li>
 
-                        <li class="usa-sidenav__item bs" style="margin-bottom: 5px;">
-                            <a style="outline:none"
-                               class="usa-nav__link{% if page.permalink contains 'fibf-mom' %} usa-current-1{% endif %}"
-                               href="{{site.baseurl}}/fibf-mom/">
-                                <div class="image-txt-container">
-                                    <div class="img-wrap"><img src="../assets/images/fibf/icons/mail.svg" class="sidebar-logo"
-                                         alt="mail icon white"></div>
-                                    <span>Mail Operations Management</span>
-                                </div>
-                            </a>
-                        </li>
                         <li class="usa-sidenav__item bs" style="margin-bottom: 5px;">
                             <a style="outline:none"
                                class="usa-nav__link{% if page.permalink contains 'fibf-rm' %} usa-current-1{% endif %}"

_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>

_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%;

assets/js/m3.js

@@ -43,4 +43,27 @@
 			}
 		});
 	});
+});
+
+
+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;
+            }
+        });
+    });
 });