<div class="c-standalone-video js-standalone-video" data-bkg-theme="base">
<div class="o-container">
<div class="c-standalone-video__wrapper">
<h2 class="u-sr-only">Drowning world</h2>
<div class="c-standalone-video__media">
<div class="c-standalone-video__media-inner">
<span class="c-standalone-video__preview">
<img src="/images/mountain.jpg" alt="">
</span>
<button class="c-standalone-video__trigger js-standalone-video-play">
<span class="u-sr-only">Play
Drowning world</span>
<span class="c-standalone-video__icon" aria-hidden="true">
<span class="c-standalone-video__icon-inner">
<svg width="24" height="26" viewBox="0 0 24 26" xmlns="http://www.w3.org/2000/svg">
<path d="M24 13L-1.1365e-06 26L0 -1.04907e-06L24 13Z" />
</svg>
</span>
</span>
</button>
<div class="c-standalone-video__video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/nR96FYJkMj8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>
<div class="c-standalone-video__caption">
<p class="c-standalone-video__title f-title--h5">Drowning world</p>
<p class="c-standalone-video__description f-text--small">Image caption goes here. Lorem ipsum dolor sit amet.</p>
<ul class="o-card__tags c-standalone-video__tags">
<li class="o-card__tag c-standalone-video__tag">
<a class="c-tag f-text--tag" href=#>Topic tag</a>
</li>
<li class="o-card__tag c-standalone-video__tag">
<a class="c-tag f-text--tag" href=#>Topic tag</a>
</li>
</ul>
</div>
</div>
</div>
</div>
{% set panelColorTheme = panelColorTheme is defined ? panelColorTheme : 'base' %}
<div class="c-standalone-video js-standalone-video" data-bkg-theme="{{ panelColorTheme }}">
<div class="o-container">
<div class="c-standalone-video__wrapper">
{% if title %}
<h2 class="u-sr-only">{{title}}</h2>
{% endif %}
<div class="c-standalone-video__media">
<div class="c-standalone-video__media-inner">
<span class="c-standalone-video__preview">
{{ videoPoster|raw }}
</span>
<button class="c-standalone-video__trigger js-standalone-video-play">
<span class="u-sr-only">Play
{{ title }}</span>
<span class="c-standalone-video__icon" aria-hidden="true">
<span class="c-standalone-video__icon-inner">
{% include "03-icons/play-large" %}
</span>
</span>
</button>
<div class="c-standalone-video__video">
{{ videoEmbed|raw }}
</div>
</div>
</div>
<div class="c-standalone-video__caption">
{% if title %}
<p class="c-standalone-video__title f-title--h5">{{title}}</p>
{% endif %}
{% if description %}
<p class="c-standalone-video__description f-text--small">{{description}}</p>
{% endif %}
{% if credit %}
<p class="c-standalone-video__credit f-text--credit">Credit:
{{credit}}</p>
{% endif %}
{% if tagLinks %}
<ul class="o-card__tags c-standalone-video__tags">
{% for tagLink in tagLinks %}
<li class="o-card__tag c-standalone-video__tag">
{% include '04-objects/tag' with tagLink only %}
</li>
{% endfor %}
</ul>
{% endif %}
</div>
</div>
</div>
</div>
{
"pageColorTheme": "teal",
"title": "Drowning world",
"videoPoster": "<img src=\"/images/mountain.jpg\" alt=\"\">",
"videoEmbed": "<iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/nR96FYJkMj8\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>",
"description": "Image caption goes here. Lorem ipsum dolor sit amet.",
"tagLinks": [
{
"title": "Topic tag",
"link": "#"
},
{
"title": "Topic tag",
"link": "#"
}
]
}
.c-standalone-video {
margin: 6.4rem 0;
@include break($sm) {
margin: 9.6rem 0;
}
&[data-bkg-theme="light"] {
margin: 0;
padding: 6.4rem 0;
@include break($sm) {
margin: 0;
padding: 9.6rem 0;
}
}
}
.c-standalone-video__title {
margin-top: 2.4rem;
}
.c-standalone-video__description {
margin-top: 1.2rem;
max-width: 55rem;
}
.c-standalone-video__credit {
margin-top: 0.8rem;
max-width: 55rem;
}
.c-standalone-video__media-inner {
position: relative;
overflow: hidden;
max-height: 98vh;
aspect-ratio: 16 / 9;
margin: 0 auto;
&:after {
content: '';
display: block;
padding-bottom: 56.25%;
@supports (aspect-ratio: 16 / 9) {
display: none;
}
}
}
.c-standalone-video__preview {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: all 0.4s ease-in-out;
z-index: 2;
img {
object-fit: cover;
width: 100%;
height: 100%;
}
.is-playing & {
opacity: 0;
transform: translate3d(0, 4rem, 0);
visibility: hidden;
}
}
.c-standalone-video__video {
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
z-index: 1;
.is-playing & {
display: block;
}
}
}
.c-standalone-video__trigger {
position: absolute;
top: 50%;
left: 50%;
width: 8.6rem;
height: 8.6rem;
background-color: $c-white;
color: var(--ct-dark);
border-radius: 50%;
transform: translate3d(-50%, -50%, 0);
z-index: 3;
transition: opacity 0.4s ease-in-out 0.2s, transform 0.4s ease-in-out 0.2s, background 0.24s ease-in-out;
.is-playing & {
opacity: 0;
transform: translate3d(-50%, -20%, 0);
visibility: hidden;
}
&:hover,
&:focus {
background-color: var(--ct-dark);
color: $c-white;
}
}
.c-standalone-video__icon {
position: absolute;
top: 50%;
left: 50%;
display: block;
transform: translate3d(-50%, -50%, 0);
svg {
display: block;
position: relative;
left: 0.3rem;
}
path {
fill: currentColor;
}
}
.o-card__tag{
font-weight:700;
}
No notes defined.