<div class="video-embed" data-embed>
<img class="video-embed__splash-image" src="" alt="" data-embed-splash-image width="1156" height="637">
<iframe class="video-embed__video" title="" data-embed-video data-video-src="&autoplay=true" allowfullscreen style="display: none;"></iframe>
<button class="video-embed__play" data-embed-play aria-label="play video">
<span class="play-button">
<svg class="play-button__oval" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="68" height="68" viewBox="0 0 68 68">
<defs>
<circle id="prefix__a" cx="32" cy="32" r="32"/>
</defs>
<g fill="none" fill-rule="evenodd" transform="translate(2 2)">
<use fill="#000" fill-opacity=".5" xlink:href="#prefix__a"/>
<circle cx="32" cy="32" r="33" stroke="#000" stroke-opacity=".5" stroke-width="2"/>
<circle cx="32" cy="32" r="31" stroke="#FF552E" stroke-linejoin="miter" stroke-width="2"/>
</g>
</svg>
<svg class="play-button__arrow" xmlns="http://www.w3.org/2000/svg" width="20" height="24" viewBox="0 0 20 24">
<path fill="#F5F5F5" fill-rule="evenodd" d="M24 44L24 20 44 32z" transform="translate(-24 -20)"/>
</svg>
</span>
</button>
</div>
<div class="video-embed" data-embed>
<img class="video-embed__splash-image" src="{{ video.thumbnailUrl | towebp | resize(1156,637) }}"
alt="{{ video.caption | escape }}" data-embed-splash-image width="1156" height="637">
<iframe class="video-embed__video" title="{{ video.iframeTitle }}" data-embed-video
data-video-src="{{ video.src }}&autoplay=true" allowfullscreen style="display: none;"></iframe>
{% if video.caption %}
<div class="video-embed__caption">
{{ video.caption }}
</div>
{% endif %}
<button class="video-embed__play" data-embed-play aria-label="play video">
{% include 'bits/icons/play-button/play-button.twig' %}
</button>
</div>
{
"siteUnit": "durp",
"departmentName": "Department of Urban and Regional Planning",
"background": "dark"
}
.video-embed
&__play
@extends $video-play
opacity 1
visibility visible
&__splash-image
aspect-ratio 16/9
height 100%
object-fit cover
object-position center
width 100%
&__video
width 100%
aspect-ratio 16/9
&__caption
@extend $detail
margin-top 8px
There are no notes for this item.