basketballcantho/sisvietnamvn_01
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: update homepage ambient video source and refactor CTA visibility logic

Browse Source
This commit is contained in:
Victor Phan
2026-07-29 23:16:12 +07:00
parent 317df123bb
commit 2fe27e1115
6 changed files with 166 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files
sisvietnamvn_main/src/main/resources/static/js/ambient-video.js
+10
View File
@@ -18,6 +18,16 @@ document.addEventListener('DOMContentLoaded', function () {
var video = videoContainer.querySelector('video'); var video = videoContainer.querySelector('video');
if (!video) return; if (!video) return;
// Attempt to explicitly play the video to bypass browser autoplay issues
var playPromise = video.play();
if (playPromise !== undefined) {
playPromise.catch(function(error) {
console.log("Auto-play was prevented by the browser:", error);
if (playBtn) playBtn.classList.remove('active');
if (pauseBtn) pauseBtn.classList.add('hidden');
});
}
if (pauseBtn) { if (pauseBtn) {
pauseBtn.addEventListener('click', function (e) { pauseBtn.addEventListener('click', function (e) {
e.preventDefault(); e.preventDefault();
sisvietnamvn_main/src/main/resources/templates/pages/home.html
+11 -8
View File
@@ -1,12 +1,15 @@
<!DOCTYPE html> <!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" <html
layout:decorate="~{themes/__${activeTheme}__/layout-home(bodyClass='umass-platform-homepage path-frontpage page-node-type-homepage homepage transparent-header')}"> lang="en"
xmlns:th="http://www.thymeleaf.org"
<head> xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{themes/__${activeTheme}__/layout-home(bodyClass='umass-platform-homepage path-frontpage page-node-type-homepage homepage transparent-header')}"
>
<head>
<title>Bệnh Viện Đa Khoa Quốc Tế S.I.S Cần Thơ</title> <title>Bệnh Viện Đa Khoa Quốc Tế S.I.S Cần Thơ</title>
</head> </head>
<body> <body>
<!-- Content Top Area --> <!-- Content Top Area -->
<div layout:fragment="content-top"> <div layout:fragment="content-top">
<th:block th:replace="~{themes/__${activeTheme}__/content-top}"></th:block> <th:block th:replace="~{themes/__${activeTheme}__/content-top}"></th:block>
@@ -22,5 +25,5 @@
<th:block th:replace="~{themes/__${activeTheme}__/snippets/block_10_education}"></th:block> <th:block th:replace="~{themes/__${activeTheme}__/snippets/block_10_education}"></th:block>
<th:block th:replace="~{themes/__${activeTheme}__/snippets/block_4_books}"></th:block> <th:block th:replace="~{themes/__${activeTheme}__/snippets/block_4_books}"></th:block>
</div> </div>
</body> </body>
</html> </html>
sisvietnamvn_main/src/main/resources/templates/themes/umass/content-top.html
+19 -7
View File
@@ -14,28 +14,40 @@
" "
/> />
<div class="f--ambient-video" id="hero-ambient-video"> <div class="f--ambient-video" id="hero-ambient-video">
<video role="presentation" tabindex="-1" loop="" autoplay="" playsinline="" muted="" id="hero-video" onerror="handleVideoError()"> <video
<source src="http://localhost:8080/uploads/2026/07/9375f45b-027a-4fb4-bd18-66889309280d.mp4" type="video/mp4" onerror="handleVideoError()" /> role="presentation"
tabindex="-1"
loop="loop"
autoplay="autoplay"
playsinline="playsinline"
muted="muted"
id="hero-video"
onerror="handleVideoError()"
>
<source src="/uploads/2026/07/homepage.mp4" type="video/mp4" onerror="handleVideoError()" />
</video> </video>
</div> </div>
<div id="hero-video-fallback" style="display: none; position: absolute; top:0; left:0; width:100%; height:100%; z-index: 2;"> <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="${videoFallbackHtml}"></th:block> <th:block th:utext="${videoFallbackHtml}"></th:block>
</div> </div>
<script> <script>
function handleVideoError() { function handleVideoError() {
var vidContainer = document.getElementById('hero-ambient-video'); 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'); 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'); 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'); var v = document.getElementById('hero-video');
if (v && v.error) { if (v && v.error) {
handleVideoError(); handleVideoError();
sisvietnamvn_main/src/main/resources/templates/themes/umass/snippets/block_1_block-multiple-ctas.html
+1 -1
View File
@@ -1,5 +1,5 @@
<div data-component-id="umass_base:block-multiple-ctas" data-background="solid" data-layout-variant="default"> <div data-component-id="umass_base:block-multiple-ctas" data-background="solid" data-layout-variant="default">
<div class="container" th:unless="${ctaMenu != null and not #lists.isEmpty(ctaMenu.items)}"> <div class="container" th:if="${ctaMenu != null and not #lists.isEmpty(ctaMenu.items)}">
<div class="text-container"> <div class="text-container">
<div data-component-id="umass_base:section-title" class="f--section-title"> <div data-component-id="umass_base:section-title" class="f--section-title">
<h2>TÌM HIỂU<span class="highlight">KHOA ĐIỀU TRỊ</span></h2> <h2>TÌM HIỂU<span class="highlight">KHOA ĐIỀU TRỊ</span></h2>
sisvietnamvn_main/src/main/resources/templates/themes/umass/snippets/content-top.html
+48 -32
View File
@@ -14,34 +14,41 @@
" "
/> />
<div class="f--ambient-video" id="hero-ambient-video"> <div class="f--ambient-video" id="hero-ambient-video">
<video role="presentation" tabindex="-1" loop="" autoplay="" playsinline="" muted="" <video
id="hero-video" onerror="handleVideoError()"> role="presentation"
<source tabindex="-1"
src="http://localhost:8080/uploads/2026/07/9375f45b-027a-4fb4-bd18-66889309280d.mp4" loop="loop"
type="video/mp4" onerror="handleVideoError()" /> autoplay="autoplay"
playsinline="playsinline"
muted="muted"
id="hero-video"
onerror="handleVideoError()"
>
<source src="/uploads/2026/07/homepage.mp4" type="video/mp4" onerror="handleVideoError()" />
</video> </video>
</div> </div>
<div id="hero-video-fallback" <div
style="display: none; position: absolute; top:0; left:0; width:100%; height:100%; z-index: 2;"> id="hero-video-fallback"
<th:block style="display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2"
th:utext="${hookManager.applyFilters('the_content', '[plugin:swiper-slider slug=''video-fallback'']')}"> >
<th:block th:utext="${hookManager.applyFilters('the_content', '[plugin:swiper-slider slug=''video-fallback'']')}">
</th:block> </th:block>
</div> </div>
<script> <script>
function handleVideoError() { function handleVideoError() {
var vidContainer = document.getElementById('hero-ambient-video'); 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'); 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'); 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'); var v = document.getElementById('hero-video');
if (v && v.error) { if (v && v.error) {
handleVideoError(); handleVideoError();
@@ -78,40 +85,50 @@
<div class="text-container centered"> <div class="text-container centered">
<div class="slide-text-container-inner"> <div class="slide-text-container-inner">
<h3> <h3>
<a href="https://www.umass.edu/gateway/why-umass">Stroke International School <a href="https://www.umass.edu/gateway/why-umass">Stroke International School 2026.</a>
2026.</a>
</h3> </h3>
<div class="f--field f--button"> <div class="f--field f--button">
<a href="https://www.umass.edu/gateway/why-umass" <a
href="https://www.umass.edu/gateway/why-umass"
class="button-secondary button-context-dark" class="button-secondary button-context-dark"
aria-label="Learn More Learn more about UMass Amherst." aria-label="Learn More Learn more about UMass Amherst."
data-component-id="umass_base:button"> data-component-id="umass_base:button"
>
<span class="button-text"> Learn More </span> <span class="button-text"> Learn More </span>
</a> </a>
</div> </div>
<nav class="mc--menu mc--info-menu" <nav class="mc--menu mc--info-menu" th:if="${infoMenu != null and not #lists.isEmpty(infoMenu.items)}">
th:if="${infoMenu != null and not #lists.isEmpty(infoMenu.items)}">
<ul class="menu m--menu m--info-menu"> <ul class="menu m--menu m--info-menu">
<li class="menu-item menu-item--expanded"> <li class="menu-item menu-item--expanded">
<details class="utility-button-wrapper mc--info-menu-container"> <details class="utility-button-wrapper mc--info-menu-container">
<summary type="button" <summary
type="button"
aria-label="Display submenu for Information menu" aria-label="Display submenu for Information menu"
aria-expanded="false" aria-haspopup="true" aria-expanded="false"
class="utility-button arrow-toggle information-for-toggle"> aria-haspopup="true"
class="utility-button arrow-toggle information-for-toggle"
>
<span th:text="${infoMenu.name}">Info For</span> <span th:text="${infoMenu.name}">Info For</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" <svg
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" version="1.1"
viewBox="0 0 16 7" enable-background="new 0 0 16 7" xmlns="http://www.w3.org/2000/svg"
xml:space="preserve" width="16" height="7" class="arrow"> xmlns:xlink="http://www.w3.org/1999/xlink"
<polygon fill-rule="evenodd" clip-rule="evenodd" x="0px"
fill="#ffffff" points="7,7 0,0 16,0 "></polygon> 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> </svg>
</summary> </summary>
<div class="submenu-wrapper"> <div class="submenu-wrapper">
<ul class="submenu"> <ul class="submenu">
<li class="menu-item" th:each="item : ${infoMenu.items}"> <li class="menu-item" th:each="item : ${infoMenu.items}">
<a th:href="${item.url}" <a th:href="${item.url}" th:text="${item.label}">Prospective Students</a>
th:text="${item.label}">Prospective Students</a>
</li> </li>
</ul> </ul>
</div> </div>
@@ -119,8 +136,7 @@
<div class="submenu-wrapper-desktop"> <div class="submenu-wrapper-desktop">
<ul class="submenu"> <ul class="submenu">
<li class="menu-item" th:each="item : ${infoMenu.items}"> <li class="menu-item" th:each="item : ${infoMenu.items}">
<a th:href="${item.url}" th:text="${item.label}">Prospective <a th:href="${item.url}" th:text="${item.label}">Prospective Students</a>
Students</a>
</li> </li>
</ul> </ul>
</div> </div>
sisvietnamvn_main/uploads/2026/07/homepage.mp4
BIN
View File
Binary file not shown.