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,7 +1,10 @@
|
||||
<!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')}">
|
||||
|
||||
<!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>
|
||||
|
||||
@@ -14,12 +14,24 @@
|
||||
"
|
||||
/>
|
||||
<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>
|
||||
|
||||
|
||||
+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>
|
||||
|
||||
+44
-28
@@ -14,18 +14,25 @@
|
||||
"
|
||||
/>
|
||||
<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;">
|
||||
<th:block
|
||||
th:utext="${hookManager.applyFilters('the_content', '[plugin:swiper-slider slug=''video-fallback'']')}">
|
||||
<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>
|
||||
|
||||
@@ -78,40 +85,50 @@
|
||||
<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>
|
||||
<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"
|
||||
<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">
|
||||
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)}">
|
||||
<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"
|
||||
<summary
|
||||
type="button"
|
||||
aria-label="Display submenu for Information menu"
|
||||
aria-expanded="false" aria-haspopup="true"
|
||||
class="utility-button arrow-toggle information-for-toggle">
|
||||
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
|
||||
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>
|
||||
<a th:href="${item.url}" th:text="${item.label}">Prospective Students</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -119,8 +136,7 @@
|
||||
<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>
|
||||
<a th:href="${item.url}" th:text="${item.label}">Prospective Students</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
Binary file not shown.
Reference in New Issue
Block a user