feat: update homepage ambient video source and refactor CTA visibility logic
This commit is contained in:
@@ -18,6 +18,16 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
var video = videoContainer.querySelector('video');
|
||||
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) {
|
||||
pauseBtn.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
@@ -1,26 +1,29 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" xmlns:th="http://www.thymeleaf.org" 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>
|
||||
<!doctype html>
|
||||
<html
|
||||
lang="en"
|
||||
xmlns:th="http://www.thymeleaf.org"
|
||||
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>
|
||||
</head>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body>
|
||||
<!-- Content Top Area -->
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<!-- Main Content Area -->
|
||||
<div layout:fragment="content">
|
||||
<th:block th:replace="~{themes/__${activeTheme}__/snippets/block_1_block-multiple-ctas}"></th:block>
|
||||
<th:block th:replace="~{themes/__${activeTheme}__/snippets/block_3_button}"></th:block>
|
||||
<th:block th:replace="~{themes/__${activeTheme}__/snippets/block_9_news_features}"></th:block>
|
||||
<th:block th:replace="~{themes/__${activeTheme}__/snippets/block_11_charity}"></th:block>
|
||||
<th:block th:replace="~{themes/__${activeTheme}__/snippets/tabbed-livestream-snippet}"></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_1_block-multiple-ctas}"></th:block>
|
||||
<th:block th:replace="~{themes/__${activeTheme}__/snippets/block_3_button}"></th:block>
|
||||
<th:block th:replace="~{themes/__${activeTheme}__/snippets/block_9_news_features}"></th:block>
|
||||
<th:block th:replace="~{themes/__${activeTheme}__/snippets/block_11_charity}"></th:block>
|
||||
<th:block th:replace="~{themes/__${activeTheme}__/snippets/tabbed-livestream-snippet}"></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>
|
||||
</div>
|
||||
</body>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -14,28 +14,40 @@
|
||||
"
|
||||
/>
|
||||
<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
|
||||
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>
|
||||
</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>
|
||||
</div>
|
||||
|
||||
|
||||
<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();
|
||||
|
||||
+1
-1
@@ -1,5 +1,5 @@
|
||||
<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 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>
|
||||
|
||||
+112
-96
@@ -1,56 +1,63 @@
|
||||
<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="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>
|
||||
</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'']')}">
|
||||
</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 +68,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 +79,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>
|
||||
|
||||
Binary file not shown.
Reference in New Issue
Block a user