Menu

Hero - Homepage with video

<figure class="mp c-hero c-hero--homepage c-hero--homepage-video">
<div class="u-wrap">
<div class="c-hero__content">
<header class="u-flow--m">
<h1 class="c-h c-h--page-title">We&#39;re big on small.</h1>
<p>We make scientific instruments and services that make the invisible visible, and the impossible possible.</p>
</header>
<a href="" class="mp c-twi u-link c-twi--left"><span>About Malvern Panalytical</span>
<svg role="img" aria-hidden="true" focusable="false" class="mp c-icon c-icon--arrow-right">
<use xlink:href="/static/svg/sprite.svg#arrow-right"></use>
</svg>
</a>
</div>
</div>
<div class="c-hero__video-bg" style="background-image:url(https://p3.aprimocdn.net/malvernpanalytical/bf169dc6-9edb-4609-9ba8-add301206d1e/bridge-bg_Original%20file.webp?quality=60);">
<video id="videoBackground" autoplay loop>
<source src="https://p3.aprimocdn.net/malvernpanalytical/304f04aa-ae04-4bed-9946-ae3101152327/PN12593_Brand_Movie_Malvern_Panalytical_MIX_0dBfs_website_header_Original%20file.mp4" type="video/mp4">
</video>
</div>
<canvas class="c-hero__canvas"></canvas>
<button type="button" class="mp c-button c-hero__button c-button--outline-white" id=playVideo>Play video</button>
</figure>
<div id="lightboxVideo" class="c-lightbox u-hidden">
<div class="c-lightbox__close">
<svg role="img" aria-hidden="true" focusable="false" class="mp c-icon c-icon--cross">
<use xlink:href="/static/svg/sprite.svg#cross"></use>
</svg>
</div>
<div class="c-lightbox__slide active">
<video class="c-lightbox__video" controls controlslist="nodownload">
<source src="https://p3.aprimocdn.net/malvernpanalytical/304f04aa-ae04-4bed-9946-ae3101152327/PN12593_Brand_Movie_Malvern_Panalytical_MIX_0dBfs_website_header_Original%20file.mp4" type="video/mp4">
</video>
</div>
</div>
{
"title": "We're big on small.",
"subtitle": null,
"content": "<p>We make scientific instruments and services that make the invisible visible, and the impossible possible.</p>",
"videoplaceholder": {
"src": "https://p3.aprimocdn.net/malvernpanalytical/bf169dc6-9edb-4609-9ba8-add301206d1e/bridge-bg_Original%20file.webp?quality=60"
},
"shortvideo": [
{
"src": ""
},
{
"type": "video/mp4"
}
],
"longvideo": [
{
"src": ""
},
{
"type": "video/mp4"
}
],
"cta": {
"label": "About Malvern Panalytical",
"link": ""
},
"homepage": "dark"
}

Props

Name Type Description
title string
subtitle string
content html
classes string
cta object Add text with icon component
breadcrumb object Add breadcrumb component
image object Add background image

CSS modifiers

Name Type Description
c-hero--no-cover Remove cover beneath the hero
c-hero--image Increse padding to allow for image