<div class="ecosystem-home-hero ecosystem-home-hero--background-video ecosystem-home-hero--featured-image">
<div class="ecosystem-home-hero__media">
<img src="../../img/ecosystem-hero-featured_fpo.jpg" alt="" loading="lazy" width="2002" height="1065">
<video class="ecosystem-home-hero__video" autoplay muted loop>
<source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4">
</video>
</div>
<div class="ecosystem-home-hero__content">
<h1 class="ecosystem-home-hero__title">Hero Title Lorem Ipsum Dolor</h1>
<div class="iastate22-button-set">
<ul>
<li>
<a class="iastate22-button" href="https://iastate.edu">Button Label<span class="arrow"></span></a>
</li>
<li>
<a class="iastate22-button" href="https://iastate.edu">Button Label<span class="arrow"></span></a>
</li>
</ul>
</div>
</div>
</div>
<div class="ecosystem-home-hero ecosystem-home-hero--background-video ecosystem-home-hero--featured-image">
<div class="ecosystem-home-hero__media">
{% if hero.image %}
<img src="{{ hero.image }}" alt="" loading="lazy" width="2002" height="1065">
{% else %}
<img src="https://cdn.theme.iastate.edu/img/placeholder.png" class="bg-placeholder" alt="placeholder">
{% endif %}
<video class="ecosystem-home-hero__video" autoplay muted loop>
<source src="{{ hero.video.url }}" type="{{ hero.video.mime_type }}">
</video>
</div>
<div class="ecosystem-home-hero__content">
<h1 class="ecosystem-home-hero__title">{{ hero.title }}</h1>
{% if hero.button_set.items %}
{% include "@button-set" with hero.button_set %}
{% endif %}
</div>
</div>
{
"hero": {
"image": "../../img/ecosystem-hero-featured_fpo.jpg",
"title": "Hero Title Lorem Ipsum Dolor",
"video": {
"url": "https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4",
"mime_type": "video/mp4"
},
"button_set": {
"items": [
{
"text": "Button Label",
"url": "https://iastate.edu"
},
{
"text": "Button Label",
"url": "https://iastate.edu"
}
]
}
}
}
.ecosystem-home-hero {
position: relative;
margin: 0 rem(-36) rem(40);
@include media-breakpoint-up(md) {
margin: 0 rem(-70) rem(60);
}
@include media-breakpoint-up(xl) {
margin: 0 rem(-298) rem(70) rem(-190);
}
&.ecosystem-home-hero--no-image {
background-color: $iastate-red;
padding: rem(50) rem(36);
@include media-breakpoint-up(md) {
padding: rem(60) rem(70);
}
@include media-breakpoint-up(xl) {
padding: rem(105) rem(82);
}
&:before {
@include media-breakpoint-up(xl) {
content: "";
background-color: $iastate-red;
position: absolute;
top: 0;
left: -50vw;
width: 150vw;
bottom: 0;
z-index: -1;
}
}
}
&.ecosystem-home-hero--supporting-image {
background-color: $iastate-red;
@include media-breakpoint-up(lg) {
display: flex;
flex-wrap: wrap;
align-items: center;
padding-bottom: rem(84);
margin-right: 0;
}
@include media-breakpoint-up(xl) {
margin-right: rem(-110);
}
&:before {
@include media-breakpoint-up(xl) {
content: "";
background-color: $iastate-red;
position: absolute;
top: 0;
left: -100vw;
width: 100vw;
bottom: 0;
z-index: -1;
}
}
}
&.ecosystem-home-hero--atmospheric-image {
.iastate22-button-set {
ul {
@include media-breakpoint-up(md) {
justify-content: center;
}
.iastate22-button {
border-color: $iastate-maroon;
.arrow {
background-color: $iastate-gold;
&:before,
&:after {
background-color: $iastate-gold;
}
}
}
}
}
}
.iastate22-button-set {
ul {
@include media-breakpoint-up(md) {
display: flex;
}
.iastate22-button {
@extend %iastate22-button--reverse;
@include media-breakpoint-up(md) {
margin-right: rem(20);
}
}
}
}
}
.ecosystem-home-hero__media {
@extend %responsive-img;
.ecosystem-home-hero--featured-image & {
&:before {
padding-top: 128%;
@include media-breakpoint-up(md) {
padding-top: 53.19%;
}
}
&:after {
content: "";
background-color: rgba($grey-blue, 0.5);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
}
}
.ecosystem-home-hero--background-video & {
&:before {
@include media-breakpoint-up(md) {
padding-top: 56.2%;
}
}
// Only show the image as a fallback for users with reduced motion enabled
img {
opacity: 1;
transition: 0.3s opacity ease-in-out;
@media (prefers-reduced-motion) {
opacity: 1;
}
}
iframe,
video {
opacity: 0; // Initially hide the video player until it starts playing.
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
pointer-events: none;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-width: 177.77vh;
transition: 0.3s opacity ease-in-out;
@include media-breakpoint-up(md) {
min-width: initial;
}
}
video {
opacity: 1;
}
}
.ecosystem-home-hero--supporting-image & {
max-width: rem(475);
@include media-breakpoint-up(sm) {
margin-left: rem(38);
}
@include media-breakpoint-up(lg) {
margin: 0;
max-width: none;
flex: 0 1 auto;
width: 46%;
align-self: flex-start;
right: rem(-108);
}
&:before {
padding-top: 100%;
}
&:after {
content: "";
background-color: $white;
position: absolute;
top: 50%;
bottom: 0;
left: 0;
right: 0;
width: 100vw;
z-index: 0;
@include media-breakpoint-up(sm) {
left: rem(-38);
}
@include media-breakpoint-up(lg) {
display: none;
}
}
img {
z-index: 1;
}
}
.ecosystem-home-hero--atmospheric-image & {
&:before {
padding-top: 47.08%;
}
}
.ecosystem-home-hero__video {
transition: 0.3s opacity ease-in-out;
opacity: 0;
iframe {
opacity: 1;
}
}
}
.ecosystem-home-hero__content {
.ecosystem-home-hero--featured-image & {
position: absolute;
top: 50%;
transform: translateY(-50%);
margin: 0 rem(32);
z-index: 2;
@include media-breakpoint-up(md) {
margin: 0 rem(82);
width: 80%;
}
@include media-breakpoint-up(lg) {
width: 60%;
max-width: rem(750);
}
}
.ecosystem-home-hero--no-image & {
.iastate22-button-set {
margin-bottom: 0;
}
// breadcrumb color
.iastate22-breadcrumb {
.iastate22-breadcrumb__list {
li {
a {
color: $white;
}
&:after {
border-color: $white;
}
}
}
}
}
.ecosystem-home-hero--supporting-image & {
padding: rem(38);
@include media-breakpoint-up(lg) {
flex: 0 1 auto;
width: 54%;
padding: rem(40) 0 0 rem(83);
}
}
.ecosystem-home-hero--atmospheric-image & {
padding: rem(38);
@include media-breakpoint-up(md) {
background-color: $white;
position: relative;
top: rem(-75);
margin-right: rem(40);
margin-left: rem(40);
margin-bottom: rem(-75);
}
@include media-breakpoint-up(lg) {
top: rem(-120);
margin-right: rem(82);
margin-left: rem(82);
padding-top: rem(50);
margin-bottom: rem(-120);
}
@include media-breakpoint-up(xl) {
top: rem(-162);
margin-bottom: rem(-162);
padding-top: rem(60);
}
}
}
.ecosystem-home-hero__title {
color: $white;
font-size: rem(42.8);
@include media-breakpoint-up(md) {
font-size: rem(70);
}
.ecosystem-home-hero--supporting-image &,
.ecosystem-home-hero--atmospheric-image & {
@include media-breakpoint-up(md) {
font-size: rem(55);
line-height: (75 / 55);
}
@include media-breakpoint-up(xl) {
font-size: rem(70);
line-height: (93 / 70);
}
}
.ecosystem-home-hero--atmospheric-image & {
color: $iastate-red;
text-align: center;
}
}
// Styles for Background Video Variant only
.ecosystem-home-hero__video-button {
padding: 0 0 0 rem(7);
height: rem(20);
background-color: transparent;
border-right: none;
border-top: rem(10) solid transparent;
border-bottom: rem(10) solid transparent;
border-left: rem(10) solid $white;
position: absolute;
z-index: 2;
right: 0;
bottom: rem(40);
right: rem(40);
cursor: pointer;
&.ecosystem-home-hero__video-button--pause {
border: none;
border-left: rem(7) solid $white;
border-right: rem(7) solid $white;
}
}
This is a custom component (no class prefix in place as it does not conflict with bootstrap)
featured-image, background-video, supporting-image, atmospheric-image and no-imagefeatured-image variant contains a full-width image with a subtle color overlay, headline and an optional instance of the button-set componentbackground-video variant contains a full-width image (fallback & visible while the visible is loading), a background YouTube video, headline and an optional instance of the button-set component. The config for this variant accepts a YouTube video id and autoplays in the background with no sound or controls. A play/pause button appears in the lower right side of the hero. The video is set to loop by setting the playlist to the same value as the video id. If a video is set to “unlisted” on YouTube it will prevent the related videos from being displayed on pause.supporting-image variant contains an image, title and an optional instance of the button-set componentatmospheric-image variant contains an image, title and an optional instance of the button-set componentno-image variant contains a title and an optional instance of the button-set componentindex.scss file as @import "../components/ecosystem-home-hero/ecosystem-home-hero";.ts file for the javascript is imported into the index.ts file as import ecosystemHeroBackgroundVideo from "./components/ecosystem-home-hero";