feat: improve hero ambient video styling with responsive overrides and update security configuration to ignore static assets

sisvietnamvn_main/src/main/java/com/sisvietnamvn/web/config/SecurityConfiguration.java

@@ -45,6 +45,14 @@ public class SecurityConfiguration {
         return new MessageDigestPasswordEncoder("SHA-256");
     }
 
+    @Bean
+    public org.springframework.security.config.annotation.web.configuration.WebSecurityCustomizer webSecurityCustomizer() {
+        return (web) -> web.ignoring().requestMatchers(
+            "/css/**", "/images/**", "/js/**", "/vendor/**", "/fonts/**", "/login-assets/**",
+            "/uploads/**", "/upload/**", "/theme-assets/**", "/favicon.ico", "/favicons/**"
+        );
+    }
+
     @Bean
     public SecurityFilterChain filterChain(HttpSecurity http, CustomOidcUserService customOidcUserService) {
         http.cors(withDefaults())

sisvietnamvn_main/src/main/resources/static/css/custom.css

@@ -64,9 +64,7 @@ body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    ========================================================================== */
 
 /* --- Ambient Video --- */
-.f--ambient-video {
+
-    position: relative;
-}
 
 .f--ambient-video::after {
     content: "";

sisvietnamvn_main/src/main/resources/templates/themes/umass/content-top.html

@@ -5,6 +5,43 @@
         <div class="cc--component-container cc--homepage-hero">
           <div class="c--component c--homepage-hero">
             <div class="slides-container">
+              <style>
+                /* Mobile: Image only */
+                @media (max-width: 768px) {
+                  #hero-ambient-video,
+                  #hero-video-fallback {
+                    display: none !important;
+                  }
+                  .image-video-container > img {
+                    display: block !important;
+                    position: relative !important;
+                    z-index: 1 !important;
+                  }
+                }
+                /* Desktop/Tablet: Video most, Slide second, Image last */
+                @media (min-width: 769px) {
+                  .image-video-container > img {
+                    z-index: 1 !important;
+                    width: 100%;
+                    height: 100%;
+                    object-fit: cover;
+                  }
+                  #hero-video-fallback {
+                    z-index: 2 !important;
+                  }
+                  #hero-ambient-video {
+                    z-index: 3 !important;
+                  }
+                  .content-top .text-container.centered {
+                    z-index: 4 !important;
+                  }
+                  video#hero-video {
+                    width: 100%;
+                    height: 100%;
+                    object-fit: cover;
+                  }
+                }
+              </style>
               <div class="image-video-container has-video">
                 <img
                   src="https://www.umass.edu/sites/default/files/styles/1_1_1920x1920/public/2025-09/250616_UMASS_4515.jpg"
@@ -32,11 +69,13 @@
                   id="hero-video-fallback"
                   style="display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2"
                 >
-                  <th:block th:utext="${videoFallbackHtml}"></th:block>
+                  <th:block th:utext="${hookManager.applyFilters('the_content', '[plugin:swiper-slider slug=''video-fallback'']')}">
+                  </th:block>
                 </div>
 
                 <script>
                   function handleVideoError() {
+                    console.log('fall video');
                     var vidContainer = document.getElementById('hero-ambient-video');
                     if (vidContainer) vidContainer.style.display = 'none';
 

sisvietnamvn_main/src/main/resources/templates/themes/umass/snippets/content-top.html

@@ -5,6 +5,47 @@
         <div class="cc--component-container cc--homepage-hero">
           <div class="c--component c--homepage-hero">
             <div class="slides-container">
+              <style>
+                /* Mobile: Image only */
+                @media (max-width: 768px) {
+                  #hero-ambient-video,
+                  #hero-video-fallback {
+                    display: none !important;
+                  }
+                  .image-video-container > img {
+                    display: block !important;
+                    position: relative !important;
+                    z-index: 1 !important;
+                  }
+                }
+                /* Desktop/Tablet: Video most, Slide second, Image last */
+                @media (min-width: 769px) {
+                  .image-video-container {
+                    display: grid;
+                  }
+                  .image-video-container > * {
+                    grid-column: 1;
+                    grid-row: 1;
+                  }
+                  .image-video-container > img {
+                    z-index: 1 !important;
+                    width: 100%;
+                    height: 100%;
+                    object-fit: cover;
+                  }
+                  #hero-video-fallback {
+                    z-index: 2 !important;
+                  }
+                  /* #hero-ambient-video {
+                    z-index: 3 !important;
+                  } */
+                  video#hero-video {
+                    width: 100%;
+                    height: 100%;
+                    object-fit: cover;
+                  }
+                }
+              </style>
               <div class="image-video-container has-video">
                 <img
                   src="https://www.umass.edu/sites/default/files/styles/1_1_1920x1920/public/2025-09/250616_UMASS_4515.jpg"
@@ -38,6 +79,7 @@
 
                 <script>
                   function handleVideoError() {
+                    console.log('fall video');
                     var vidContainer = document.getElementById('hero-ambient-video');
                     if (vidContainer) vidContainer.style.display = 'none';