feat: replace hero video fallback shortcode with dynamic Swiper slider and enable observer settings for swiper instances
This commit is contained in:
@@ -1,56 +1,67 @@
|
||||
<div class="content-top">
|
||||
<div class="lc--layout-container lc--full">
|
||||
<div class="l--layout l--full">
|
||||
<div class="lr--layout-region lr--main">
|
||||
<div class="cc--component-container cc--homepage-hero">
|
||||
<div class="c--component c--homepage-hero">
|
||||
<div class="slides-container">
|
||||
<div class="image-video-container has-video">
|
||||
<img
|
||||
<div class="lc--layout-container lc--full">
|
||||
<div class="l--layout l--full">
|
||||
<div class="lr--layout-region lr--main">
|
||||
<div class="cc--component-container cc--homepage-hero">
|
||||
<div class="c--component c--homepage-hero">
|
||||
<div class="slides-container">
|
||||
<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"
|
||||
alt="Students collaborate using a driving simulator in the UMass Center for Transportation."
|
||||
srcset="
|
||||
https://www.umass.edu/sites/default/files/styles/1_1_1920x1920/public/2025-09/250616_UMASS_4515.jpg?h=9855f42d&itok=d27r8GaT 1920w
|
||||
"
|
||||
/>
|
||||
<div class="f--ambient-video" id="hero-ambient-video">
|
||||
<video role="presentation" tabindex="-1" loop="" autoplay="" playsinline="" muted=""
|
||||
id="hero-video" onerror="handleVideoError()">
|
||||
<source
|
||||
src="http://localhost:8080/uploads/2026/07/9375f45b-027a-4fb4-bd18-66889309280d.mp4"
|
||||
type="video/mp4" onerror="handleVideoError()" />
|
||||
</video>
|
||||
</div>
|
||||
<div class="f--ambient-video" id="hero-ambient-video">
|
||||
<video
|
||||
role="presentation"
|
||||
tabindex="-1"
|
||||
loop=""
|
||||
autoplay=""
|
||||
playsinline=""
|
||||
muted=""
|
||||
id="hero-video"
|
||||
onerror="handleVideoError()"
|
||||
>
|
||||
<source
|
||||
src="http://localhost:8080/uploads/2026/07/9375f45b-027a-4fb4-bd18-66889309280d.mp4"
|
||||
type="video/mp4"
|
||||
onerror="handleVideoError()"
|
||||
/>
|
||||
</video>
|
||||
</div>
|
||||
|
||||
<div id="hero-video-fallback"
|
||||
style="display: none; position: absolute; top:0; left:0; width:100%; height:100%; z-index: 2;">
|
||||
<th:block
|
||||
th:utext="${@hookManager.applyFilters('the_content', '[plugin:swiper-slider slug=''video-fallback'']')}">
|
||||
</th:block>
|
||||
</div>
|
||||
<div
|
||||
id="hero-video-fallback"
|
||||
style="display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2"
|
||||
>
|
||||
<th:block th:utext="${@hookManager.applyFilters('the_content', '[plugin:swiper-slider slug=''video-fallback-slider'']')}">
|
||||
</th:block>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function handleVideoError() {
|
||||
<script>
|
||||
function handleVideoError() {
|
||||
var vidContainer = document.getElementById('hero-ambient-video');
|
||||
if(vidContainer) vidContainer.style.display = 'none';
|
||||
|
||||
if (vidContainer) vidContainer.style.display = 'none';
|
||||
|
||||
var controls = document.querySelector('.video-controls');
|
||||
if(controls) controls.style.display = 'none';
|
||||
|
||||
if (controls) controls.style.display = 'none';
|
||||
|
||||
var fallback = document.getElementById('hero-video-fallback');
|
||||
if(fallback) fallback.style.display = 'block';
|
||||
if (fallback) fallback.style.display = 'block';
|
||||
}
|
||||
|
||||
window.addEventListener('DOMContentLoaded', function() {
|
||||
|
||||
window.addEventListener('DOMContentLoaded', function () {
|
||||
var v = document.getElementById('hero-video');
|
||||
if (v && v.error) {
|
||||
handleVideoError();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<div class="video-controls" data-once="ambientVideo">
|
||||
<div class="video-controls-inner">
|
||||
<button aria-labelledby="pauseBtn" class="video-button video-pause-button">
|
||||
</script>
|
||||
<div class="video-controls" data-once="ambientVideo">
|
||||
<div class="video-controls-inner">
|
||||
<button aria-labelledby="pauseBtn" class="video-button video-pause-button">
|
||||
<svg height="14" viewBox="0 0 10 14" width="10" xmlns="http://www.w3.org/2000/svg">
|
||||
<title id="pauseBtn">Pause Background Video</title>
|
||||
<path
|
||||
@@ -61,7 +72,7 @@
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
<button aria-labelledby="playBtn" class="video-button video-play-button">
|
||||
<button aria-labelledby="playBtn" class="video-button video-play-button">
|
||||
<svg height="29" viewBox="0 0 29 29" width="29" xmlns="http://www.w3.org/2000/svg">
|
||||
<title id="playBtn">Play Background Video</title>
|
||||
<path
|
||||
@@ -72,67 +83,76 @@
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-container centered">
|
||||
<div class="slide-text-container-inner">
|
||||
<h3>
|
||||
<a href="https://www.umass.edu/gateway/why-umass">Stroke International School
|
||||
2026.</a>
|
||||
</h3>
|
||||
<div class="f--field f--button">
|
||||
<a href="https://www.umass.edu/gateway/why-umass"
|
||||
class="button-secondary button-context-dark"
|
||||
aria-label="Learn More Learn more about UMass Amherst."
|
||||
data-component-id="umass_base:button">
|
||||
<span class="button-text"> Learn More </span>
|
||||
</a>
|
||||
</div>
|
||||
<nav class="mc--menu mc--info-menu"
|
||||
th:if="${infoMenu != null and not #lists.isEmpty(infoMenu.items)}">
|
||||
<ul class="menu m--menu m--info-menu">
|
||||
<li class="menu-item menu-item--expanded">
|
||||
<details class="utility-button-wrapper mc--info-menu-container">
|
||||
<summary type="button"
|
||||
aria-label="Display submenu for Information menu"
|
||||
aria-expanded="false" aria-haspopup="true"
|
||||
class="utility-button arrow-toggle information-for-toggle">
|
||||
<span th:text="${infoMenu.name}">Info For</span>
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 16 7" enable-background="new 0 0 16 7"
|
||||
xml:space="preserve" width="16" height="7" class="arrow">
|
||||
<polygon fill-rule="evenodd" clip-rule="evenodd"
|
||||
fill="#ffffff" points="7,7 0,0 16,0 "></polygon>
|
||||
</svg>
|
||||
</summary>
|
||||
<div class="submenu-wrapper">
|
||||
<ul class="submenu">
|
||||
<li class="menu-item" th:each="item : ${infoMenu.items}">
|
||||
<a th:href="${item.url}"
|
||||
th:text="${item.label}">Prospective Students</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</details>
|
||||
<div class="submenu-wrapper-desktop">
|
||||
<ul class="submenu">
|
||||
<li class="menu-item" th:each="item : ${infoMenu.items}">
|
||||
<a th:href="${item.url}" th:text="${item.label}">Prospective
|
||||
Students</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-container centered">
|
||||
<div class="slide-text-container-inner">
|
||||
<h3>
|
||||
<a href="https://www.umass.edu/gateway/why-umass">Stroke International School 2026.</a>
|
||||
</h3>
|
||||
<div class="f--field f--button">
|
||||
<a
|
||||
href="https://www.umass.edu/gateway/why-umass"
|
||||
class="button-secondary button-context-dark"
|
||||
aria-label="Learn More Learn more about UMass Amherst."
|
||||
data-component-id="umass_base:button"
|
||||
>
|
||||
<span class="button-text"> Learn More </span>
|
||||
</a>
|
||||
</div>
|
||||
<nav class="mc--menu mc--info-menu" th:if="${infoMenu != null and not #lists.isEmpty(infoMenu.items)}">
|
||||
<ul class="menu m--menu m--info-menu">
|
||||
<li class="menu-item menu-item--expanded">
|
||||
<details class="utility-button-wrapper mc--info-menu-container">
|
||||
<summary
|
||||
type="button"
|
||||
aria-label="Display submenu for Information menu"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
class="utility-button arrow-toggle information-for-toggle"
|
||||
>
|
||||
<span th:text="${infoMenu.name}">Info For</span>
|
||||
<svg
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
x="0px"
|
||||
y="0px"
|
||||
viewBox="0 0 16 7"
|
||||
enable-background="new 0 0 16 7"
|
||||
xml:space="preserve"
|
||||
width="16"
|
||||
height="7"
|
||||
class="arrow"
|
||||
>
|
||||
<polygon fill-rule="evenodd" clip-rule="evenodd" fill="#ffffff" points="7,7 0,0 16,0 "></polygon>
|
||||
</svg>
|
||||
</summary>
|
||||
<div class="submenu-wrapper">
|
||||
<ul class="submenu">
|
||||
<li class="menu-item" th:each="item : ${infoMenu.items}">
|
||||
<a th:href="${item.url}" th:text="${item.label}">Prospective Students</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</details>
|
||||
<div class="submenu-wrapper-desktop">
|
||||
<ul class="submenu">
|
||||
<li class="menu-item" th:each="item : ${infoMenu.items}">
|
||||
<a th:href="${item.url}" th:text="${item.label}">Prospective Students</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user