<div class="video-block" data-video-block data-is-paused="false">
<video class="video-block__video" poster="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b5/Small_waterfall.webm/800px--Small_waterfall.webm.jpg" data-video loop autoplay muted playsinline height="560" width="864">
<source src="https://upload.wikimedia.org/wikipedia/commons/transcoded/b/b5/Small_waterfall.webm/Small_waterfall.webm.360p.vp9.webm" type="">
Sorry, your browser doesn't support embedded videos.
</video>
<button class="video-block__play-button" data-video-play data-video aria-label="Pause video">
<svg class="video-block__button-icons" width="32" height="32" viewBox="0 0 32 32" fill="none"
xmlns="http://www.w3.org/2000/svg">
<circle
class="video-block__button-background "
cx="16" cy="16" r="16" fill="#1D2126"/>
<g class="video-block__pause-icon" fill="white">
<path d="M14 10H10V22H14V10Z"/>
<path d="M22 10H18V22H22V10Z"/>
</g>
<g class="video-block__play-icon" fill="white">
<path d="M22 16L12 10V22L22 16Z"/>
</g>
</svg>
</button>
</div>
<div class="video-block" data-video-block data-is-paused="false">
<video class="video-block__video" poster="{{ thumbnail | towebp | resize(864, 560) }}" data-video loop autoplay
muted
playsinline height="560" width="864">
<source src="{{ video }}" type="{{ mimeType }}">
Sorry, your browser doesn't support embedded videos.
</video>
<button class="video-block__play-button" data-video-play data-video aria-label="Pause video">
<svg class="video-block__button-icons" width="32" height="32" viewBox="0 0 32 32" fill="none"
xmlns="http://www.w3.org/2000/svg">
<circle
class="video-block__button-background {{ controlsHoverColor ? 'video-block__button-background--'~controlsHoverColor : '' }}"
cx="16" cy="16" r="16" fill="#1D2126"/>
<g class="video-block__pause-icon" fill="white">
<path d="M14 10H10V22H14V10Z"/>
<path d="M22 10H18V22H22V10Z"/>
</g>
<g class="video-block__play-icon" fill="white">
<path d="M22 16L12 10V22L22 16Z"/>
</g>
</svg>
</button>
</div>
{
"siteUnit": "durp",
"departmentName": "Department of Urban and Regional Planning",
"background": "dark",
"heading": "Dance at Illinois",
"video": "https://upload.wikimedia.org/wikipedia/commons/transcoded/b/b5/Small_waterfall.webm/Small_waterfall.webm.360p.vp9.webm",
"altText": "alt text",
"thumbnail": "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b5/Small_waterfall.webm/800px--Small_waterfall.webm.jpg"
}
.video-block
display flex
position relative
height 100%
&__video
background-color charcoalDark
color white
height 100%
object-fit cover
object-position center
margin-bottom -8px
max-height 352px
mix-blend-mode lighten
position relative
width 100vw
+above(mediumDeviceBreakpoint)
max-height 640px
+above(largeDeviceBreakpoint)
max-height 880px
+above(maxContentWidth)
max-height 1360px
&__play-button
bottom 16px
left 16px
position absolute
&__pause-icon
transition all 300ms ease-in-out
&__play-icon
transition all 300ms ease-in-out
opacity 0
visibility hidden
&[data-is-paused=true] &__pause-icon
opacity 0
visibility hidden
&[data-is-paused=true] &__play-icon
opacity 1
visibility visible
&__button-background
transition all 200ms ease-in-out
&__play-button:hover &__button-background
&__play-button:hover > *
cursor pointer
&__play-button:hover &__button-background
fill archesBlue
&--orange
fill illiniOrange
There are no notes for this item.