<div class="c-page-header-media o-container" data-bkg-theme="base">
<div class="c-page-header-media__media">
<div class="o-ambient-video js-video-parent ">
<div class="o-ambient-video__media">
<img src="/images/mountain.jpg" alt="">
<video src="/video/space.mp4" muted loop playsinline></video>
<button class="o-ambient-video__toggle js-video-toggle o-ambient-video__video-content" aria-label="Play Video" data-pauselabel="Pause Video" data-playlabel="Play Video">
<span class="o-ambient-video__icon--pause" aria-hidden="true">
<svg width="10" height="14" viewBox="0 0 10 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="u-ct-stroke" d="M9 0.0341797L9 13.8789" stroke="#C34737" stroke-width="2" />
<path class="u-ct-stroke" d="M1 0.0341797L0.999999 13.8789" stroke="#C34737" stroke-width="2" />
</svg>
</span>
<span class="o-ambient-video__icon--play" aria-hidden="true">
<svg width="13" height="16" viewBox="0 0 13 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="u-ct-stroke" d="M1 15V1L12 8L1 15Z" stroke="#C34737" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</span>
</button>
</div>
<div class="o-ambient-video__description u-sr-only">
<p>A video space</p>
</div>
<div class="o-ambient-video__audio-message o-ambient-video__video-content">
<p class="f-text--credit">This video does not contain audio</p>
</div>
</div>
</div>
<div class="c-page-header-media__details">
<div class="c-page-header-media__details-info">
<p class="c-page-header-media__caption f-text--caption">Image caption goes here. Lorem ipsum dolor sit amet.</p>
<p class="c-page-header-media__credit f-text--credit">Credit:
Lorem ipsum dolor</p>
</div>
<div class="c-page-header-media__details-audio">
<p class="c-page-header-media__audio f-text--credit f-italic">This video does not contain audio</p>
</div>
</div>
</div>
<div class="c-page-header-media o-container" data-bkg-theme="base">
<div class="c-page-header-media__media">
{% if mediaType == 'video' %}
{% include "04-objects/ambient-video" with {
videoPoster: videoPoster,
description: videoAltDescription,
videoUrl: videoUrl,
showDetails: false
} %}
{% else %}
{{ image }}
{% endif %}
</div>
<div class="c-page-header-media__details">
<div class="c-page-header-media__details-info">
{% if videoTitle %}
<h4 class="c-page-header-media__title f-title--h4">{{videoTitle}}</h4>
{% endif %}
{% if caption %}
<p class="c-page-header-media__caption f-text--caption">{{caption}}</p>
{% endif %}
{% if credit %}
<p class="c-page-header-media__credit f-text--credit">Credit:
{{credit}}</p>
{% endif %}
</div>
{% if mediaType == 'video' %}
<div class="c-page-header-media__details-audio">
<p class="c-page-header-media__audio f-text--credit f-italic">This video does not contain audio</p>
</div>
{% endif %}
</div>
</div>
{
"pageColorTheme": "teal",
"mediaType": "video",
"image": "<img src=\"/images/article/bee.jpg\" alt=\"\">",
"caption": "Image caption goes here. Lorem ipsum dolor sit amet.",
"credit": "Lorem ipsum dolor",
"videoTitle": "",
"videoPoster": "<img src=\"/images/mountain.jpg\" alt=\"\">",
"videoUrl": "/video/space.mp4",
"videoAltDescription": "<p>A video space</p>"
}
.c-page-header-media {
@include break($sm){
margin-top: 2.4rem;
margin-bottom: 3.8rem;
}
}
.c-page-header-media__details {
margin-top: 1.6rem;
@include break($sm) {
display: flex;
justify-content: space-between;
}
}
.c-page-header-media__details-info {
flex: 0 0 60%;
}
.c-page-header-media__caption + .c-page-header-media__credit {
margin-top: 0.4rem;
}
.c-page-header-media__details-audio {
margin-top: 0.6rem;
}
.c-page-header-media__title {
margin: 3rem 0;
}
No notes defined.