Edit
<!-- components/7-homepage-rows/homepage-hero.php -->
<link rel="stylesheet" type="text/css" href="/atomic-docs/wm/prod/main.css">
<section class="HomeHero">
<?php
outputMenu("topbar");
?>
<header id="main-header">
<?php outputMenu("site-menu"); ?>
<?php outputMenu("info-for-menu"); ?>
</header>
<!-- <div class="logo-wrapper">
<img alt="William & Mary home" src="http://localhost/wmhome24/files/wm_full_horizontal.svg">
</div> -->
<div class="HomeHero__wrapper aos-init aos-animate" data-aos="fade" data-aos-delay="0" data-aos-duration="400">
<div class="HomeHero__video-wrapper videocontainer">
<p class="sr-only HomeHero__video-description" id="video_description">Ambient video of scenes of life at William & Mary: aerial view of the historic Wren Building; a student and faculty member working in front of whiteboards; a student on a research boat; two people working in a lab; students tossing colorful powder during a Holi celebration on campus; students on an inflatable ride; W&M cheerleaders and griffin mascot celebrating at a football game in Zable Stadium</p>
<video aria-describedby="video_description" autoplay="autoplay" id="hero_video" loop="loop" muted="" playsinline="" poster="" preload="auto" tabindex="-1" src=""></video>
<!-- image stand in for video while developing -->
<!-- <img class="HomeHero__video-image" alt="Aerial view of the historic Wren Building" src="http://localhost/atomic-docs/wm/images/aerial.jpg"> -->
<button class="HomeHero__video-button" id="video_button"><i aria-hidden="true" class="fa fa-pause"></i><span class="sr-only">Pause video</span></button>
</div>
<div class="HomeHero__caption-wrapper">
<h2 class="HomeHero__caption-title"></h2>
<p class="HomeHero__caption-text"></p>
<div class="HomeHero__links-wrapper hidden">
<a class="HomeHero__links-link HomeHero__links-primarylink" href="https://www.wm.edu/about/index.php" target="_parent" aria-label="More about William & Mary"></a>
<a class="HomeHero__links-link hidden" href="https://www.wm.edu/about/index.php" target="_parent" aria-label="More about William & Mary"></a>
</div>
</div>
</div>
</section>
<script>
// fix Adjust Hero height if there is a broadcast message
var broadcast = document.querySelector('.broadcastBarTop');
if (broadcast) {
var myHero = document.querySelector('.m-hero');
if (myHero) {
myHero.classList.add('is-broadcast');
}
}
var myWMHero = {
"items": [{
"address": "https://creative.wm.edu/media/WebShort1.mp4",
alt: "Ambient video of scenes of life at William & Mary: aerial view of the historic Wren Building; a student and faculty member working in front of whiteboards; a student on a research boat; two people working in a lab; students tossing colorful powder during a Holi celebration on campus; students on an inflatable ride; W&M cheerleaders and griffin mascot celebrating at a football game in Zable Stadium",
captiontitle: "Distinct <i>&</i> Distinguished",
captiontext: "Located in Williamsburg, Virginia, William & Mary brings together the global opportunities of a larger research university with the personal education of a liberal arts and sciences institution.",
linkarialabel: "More about William & Mary",
links: [{
"text": "More 1",
"url": "/1/index.php"
},
{
"text": "More 2",
"url": "/2/index.php"
}
]
},
{
"address": "https://creative.wm.edu/media/WebShort2.mp4",
alt: "Ambient video of scenes of life at William & Mary: a student walking an historic brick pathway on campus; a faculty member and student discussing art in a gallery; Bhangra dancers perform outside of Zable Stadium; students giving a presentation in a glass-walled classroom; opening ceremony at an athletic event with military uniformed participants; students smiling and waving with their painted sign; the Crim Dell bridge framed by golden fall foliage",
captiontitle: "2Gathering the brightest minds for a better world.",
captiontext: "William & Mary is a premier public research university, widely recognized for our outstanding academic reputation, beautiful campus and vibrant community. We produce experienced, engaged and successful graduates who lead lives of impact.",
linkarialabel: "More about William & Mary",
links: [{
"text": "More 5",
"url": "/5/index.php"
}]
},
{
"address": "https://creative.wm.edu/media/WebShort3.mp4",
alt: "Ambient video of scenes of life at William & Mary: aerial view of the Sadler Center student union and Wellness Center buildings; students hiking in nature; students and a faculty member working in a lab; students cheering in Zable Stadium as the football team takes the field; a student fabricating metal in an industrial studio; students cheering on campus; aerial view of the Sunken Garden with students relaxing together at sunset",
captiontitle: "3Gathering the brightest minds.",
captiontext: "William & Mary is a premier public research university, widely recognized for our outstanding academic reputation, beautiful campus and vibrant community. We produce experienced, engaged and successful graduates who lead lives of impact.",
linkarialabel: "More about William & Mary",
links: []
},
]
}
// ---------------------- HERO ROW: VIDEO OR IMAGE ------------------ //
if (typeof myWMHero !== 'undefined') {
if (typeof randomIndex == 'undefined') {
var randomIndex = Math.floor(Math.random() * myWMHero.items.length);
}
var randomAddress = myWMHero.items[randomIndex].address;
var randomAlt = myWMHero.items[randomIndex].alt;
var randomExtension = randomAddress.split('.').pop();
var randomCaptionTitle = myWMHero.items[randomIndex].captiontitle;
var randomCaptionText = myWMHero.items[randomIndex].captiontext;
var randomLinkAriaLabel = myWMHero.items[randomIndex].linkarialabel;
var randomLinkAriaLabel = randomLinkAriaLabel.replace(/&/g, '&');
var randomPrimaryLink = myWMHero.items[randomIndex].links[0];
if (typeof randomPrimaryLink !== 'undefined') {
var randomPrimaryLinkText = randomPrimaryLink.text.replace(/&/g, '&');
}
var randomSecondaryLink = myWMHero.items[randomIndex].links[1];
if (typeof randomSecondaryLink !== 'undefined') {
var randomSecondaryLinkText = randomSecondaryLink.text.replace(/&/g, '&');
}
if (randomExtension == "mp4") {
// do video things
myItem = document.querySelector(".HomeHero__wrapper");
myItemInner = myItem.querySelector(".videocontainer");
myVideo = myItemInner.querySelector("video");
// wait for video to load, then fade in
myVideo.addEventListener('loadedmetadata', function(event) {
myItemInner.classList.add("heroin");
myItemInner.classList.remove("hidden");
myItem.classList.remove("hidden");
});
myVideo.setAttribute("src", randomAddress);
myVideo.load();
myDescription = document.querySelector("#video_description");
myDescription.innerHTML = randomAlt;
} else {
// do image things
myItemInner = document.querySelector("HomeHero__video-image");
// myItemInner = myItem.querySelector("span");
// preload the image into browser cache
var my_image = new Image();
my_image.onload = function() {
myItemInner.style.backgroundImage = "url('" + randomAddress + "')";
myItemInner.setAttribute("aria-label", randomAlt);
myItemInner.classList.add("heroin");
myItemInner.classList.remove("hidden");
myItem.classList.remove("hidden");
};
my_image.src = randomAddress;
}
// do caption things
if (randomCaptionTitle !== "") {
myCaptionTitle = document.querySelector(".HomeHero__caption-title");
myCaptionTitle.innerHTML = randomCaptionTitle;
}
if (randomCaptionText !== "") {
myCaptionText = document.querySelector(".HomeHero__caption-text");
myCaptionText.innerHTML = randomCaptionText;
}
if (randomPrimaryLink !== undefined) {
linkContainer = document.querySelector(".HomeHero__links-wrapper");
linkContainer.classList.remove("hidden");
let myPrimaryLink = linkContainer.querySelector("a:first-child");
myPrimaryLink.setAttribute("href", randomPrimaryLink.url);
if (randomLinkAriaLabel !== "") {
myPrimaryLink.setAttribute("aria-label", randomLinkAriaLabel);
}
myPrimaryLink.innerHTML = randomPrimaryLinkText;
if (typeof randomSecondaryLink !== 'undefined') {
let mySecondaryLink = linkContainer.querySelector("a:last-child");
mySecondaryLink.classList.remove("hidden");
mySecondaryLink.setAttribute("href", randomSecondaryLink.url);
if (randomLinkAriaLabel !== "") {
mySecondaryLink.setAttribute("aria-label", randomLinkAriaLabel);
}
mySecondaryLink.innerHTML = randomSecondaryLinkText;
}
} else {
linkContainer = document.querySelector(".HomeHero__links-wrapper");
linkContainer.setAttribute("hidden", "hidden");
}
}
// ---------------------- VIDEOS PLAY/PAUSE ------------------ //
/* HERO */
var ppbutton = document.getElementById("video_button");
if (ppbutton) {
ppbutton.addEventListener("click", playPauseHero);
}
var myHeroVideo = document.getElementById("hero_video");
myHeroVideo.pause();
function playPauseHero() {
if (myHeroVideo) {
if (myHeroVideo.paused) {
myHeroVideo.play();
ppbutton.innerHTML = '<i aria-hidden="true" class="fa fa-pause"></i><span class="sr-only">Pause video</span>';
} else {
myHeroVideo.pause();
ppbutton.innerHTML = '<i aria-hidden="true" class="fa fa-play"></i><span class="sr-only">Play video</span>';
}
}
}
/* Prefers Reduced Motion */
var motionQuery = window.matchMedia('screen and (prefers-reduced-motion: reduce)');
function handleReduceMotionChanged() {
if (motionQuery.matches) {
if (myHeroVideo) {
myHeroVideo.pause();
ppbutton.innerHTML = '<i aria-hidden="true" class="fa fa-play"></i><span class="sr-only">Play video</span>';
}
if (myEventsVideo) {
myEventsVideo.pause();
eppbutton.innerHTML = '<i aria-hidden="true" class="fa fa-play"></i><span class="sr-only">Play video</span>';
}
}
};
handleReduceMotionChanged(); // trigger this once on load to set up the initial value
motionQuery.addListener(handleReduceMotionChanged); // Note: https://webkit.org/b/168491
</script>
<!-- <script src="<?php echo $base_url; ?>/js/homepage-hero.js" type="text/javascript"> -->
close
