<!-- 
{{/* 
    
    Usage: 
    {{< vimeo id="727145223" image="/uploads/resizeallimages.png" >}}
    
*/}}
-->


<p><a class="shortcode-vimeo" href="https://vimeo.com/{{ .Get `id` }}" title="Play Vimeo video" target="_blank">
    <img src="{{ if (resources.GetMatch (.Get `image`)) }}{{ ((resources.GetMatch (.Get `image`)).Fill `1200x675 jpg Center q50`).RelPermalink | safeURL }}{{ end }}" alt="Vimeo video {{ .Get `id` }}" />
    <span class="playbutton"></span>
</a></p>

<style>
.shortcode-vimeo {
    position: relative; display: inline-block; margin-top: 1rem;
}
.shortcode-vimeo::after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
} 
.shortcode-vimeo .playbutton {
    position: absolute;
    width: 6rem;
    height: 4rem;
    border-radius: 0.65rem;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.6) url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyOC43NTgiIGhlaWdodD0iMjguODQ5IiB2aWV3Qm94PSIwIDAgNy42MDkgNy42MzMiIHhtbG5zOnY9Imh0dHBzOi8vdmVjdGEuaW8vbmFubyI+PHBhdGggZD0iTTAgMHY3LjYzM2w3LjYwOS0zLjg3NHoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=') 55% center / auto 1.9rem no-repeat;
    z-index: 3;
}
.shortcode-vimeo .playbutton:hover {background-color: #00adef;}
.shortcode-vimeo::after {
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgYWx0PSJWaW1lbyIKICAgd2lkdGg9Ijk5LjY0NjYxNCIKICAgaGVpZ2h0PSIyOC4xNjA5OTkiCiAgIHZlcnNpb249IjEuMSIKICAgaWQ9InN2ZzQiCiAgIHNvZGlwb2RpOmRvY25hbWU9InRlc3Quc3ZnIgogICBpbmtzY2FwZTp2ZXJzaW9uPSIxLjEuMiAoMToxLjErMjAyMjAyMDUwOTUwKzBhMDBjZjUzMzkpIgogICB4bWxuczppbmtzY2FwZT0iaHR0cDovL3d3dy5pbmtzY2FwZS5vcmcvbmFtZXNwYWNlcy9pbmtzY2FwZSIKICAgeG1sbnM6c29kaXBvZGk9Imh0dHA6Ly9zb2RpcG9kaS5zb3VyY2Vmb3JnZS5uZXQvRFREL3NvZGlwb2RpLTAuZHRkIgogICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxkZWZzCiAgICAgaWQ9ImRlZnM4IiAvPgogIDxzb2RpcG9kaTpuYW1lZHZpZXcKICAgICBpZD0ibmFtZWR2aWV3NiIKICAgICBwYWdlY29sb3I9IiNmZmZmZmYiCiAgICAgYm9yZGVyY29sb3I9IiM2NjY2NjYiCiAgICAgYm9yZGVyb3BhY2l0eT0iMS4wIgogICAgIGlua3NjYXBlOnBhZ2VzaGFkb3c9IjIiCiAgICAgaW5rc2NhcGU6cGFnZW9wYWNpdHk9IjAuMCIKICAgICBpbmtzY2FwZTpwYWdlY2hlY2tlcmJvYXJkPSIwIgogICAgIHNob3dncmlkPSJmYWxzZSIKICAgICBmaXQtbWFyZ2luLXRvcD0iMCIKICAgICBmaXQtbWFyZ2luLWxlZnQ9IjAiCiAgICAgZml0LW1hcmdpbi1yaWdodD0iMCIKICAgICBmaXQtbWFyZ2luLWJvdHRvbT0iMCIKICAgICBpbmtzY2FwZTp6b29tPSIxMS4yNiIKICAgICBpbmtzY2FwZTpjeD0iNDkuODIyMzgiCiAgICAgaW5rc2NhcGU6Y3k9IjE4LjY1MDA4OSIKICAgICBpbmtzY2FwZTp3aW5kb3ctd2lkdGg9IjM0NDAiCiAgICAgaW5rc2NhcGU6d2luZG93LWhlaWdodD0iMTM5MSIKICAgICBpbmtzY2FwZTp3aW5kb3cteD0iMCIKICAgICBpbmtzY2FwZTp3aW5kb3cteT0iMCIKICAgICBpbmtzY2FwZTp3aW5kb3ctbWF4aW1pemVkPSIxIgogICAgIGlua3NjYXBlOmN1cnJlbnQtbGF5ZXI9InN2ZzQiIC8+CiAgPHBhdGgKICAgICBkPSJtIDIyLjI3MiwxMy4yNDIgYyAtMC4xMDQsMi4xNyAtMS42MTgsNS4xNDYgLTQuNTQ0LDguOTEyIC0zLjAzLDMuOTQyIC01LjU5LDUuOTEyIC03LjY4Niw1LjkxMiAtMS4yOTcsMCAtMi4zOTcsLTEuMjA0IC0zLjMsLTMuNiAtMC42LC0yLjIgLTEuMjAyLC00LjM5OCAtMS43OTQsLTYuNTk4IC0wLjY2NCwtMi4zOTYgLTEuMzgsLTMuNiAtMi4xNDcsLTMuNiAtMC4xNjYsMCAtMC43NDcsMC4zNTQgLTEuNzUzLDEuMDUgTCAwLDEzLjk2OCBjIDEuMSwtMC45NjUgMi4xOSwtMS45MyAzLjI1NywtMi45MDUgMS40NjMsLTEuMjY1IDIuNTczLC0xLjk0IDMuMywtMi4wMDIgMS43MzIsLTAuMTY2IDIuOCwxLjAxNyAzLjIwNSwzLjU1OCAwLjQzNSwyLjc0IDAuNzM2LDQuNDQgMC45MDIsNS4xMTUgMC40OTgsMi4yNyAxLjA0OCwzLjQwMiAxLjY1LDMuNDAyIDAuNDY2LDAgMS4xNzIsLTAuNzM3IDIuMTA1LC0yLjIxIDAuOTM0LC0xLjQ3MyAxLjQzMiwtMi41OTMgMS41MDQsLTMuMzcgMC4xMzMsLTEuMjc3IC0wLjM2NSwtMS45MSAtMS41MDYsLTEuOTEgLTAuNTMsMCAtMS4wOCwwLjEyNSAtMS42NSwwLjM2NCAxLjEsLTMuNTkgMy4xODYsLTUuMzMzIDYuMjc3LC01LjIzIDIuMjczLDAuMDczIDMuMzUsMS41NTYgMy4yMjcsNC40NiBtIDEzLjc1NSw3LjAzNCBjIC0wLjkzMywxLjc2NCAtMi4yMiwzLjM3IC0zLjg2LDQuODAzIC0yLjI0LDEuOTMgLTQuNDcsMi45MDUgLTYuNywyLjkwNSAtMS4wMzcsMC4wMDIgLTEuODI2LC0wLjMzIC0yLjM3NiwtMC45OTQgLTAuNTUsLTAuNjYzIC0wLjgxLC0xLjUzNSAtMC43NzcsLTIuNjAzIDAuMDMsLTEuMSAwLjM3MiwtMi44IDEuMDI1LC01LjEwNCAwLjY1NCwtMi4zMDMgMC45NzYsLTMuNTM3IDAuOTc2LC0zLjcwMyAwLC0wLjg2IC0wLjMsLTEuMjk3IC0wLjkwMiwtMS4yOTcgLTAuMTk4LDAgLTAuNzcsMC4zNTMgLTEuNzAyLDEuMDQ4IGwgLTEuMTUyLC0xLjM1IGMgMS4wNywtMC45NjIgMi4xMzcsLTEuOTI3IDMuMjA2LC0yLjkwMiAxLjQzLC0xLjI2NiAyLjUsLTEuOTQgMy4yMDUsLTIuMDAyIDEuMSwtMC4xMDMgMS45MSwwLjIzIDIuNDI4LDAuOTc2IDAuNTE4LDAuNzQ3IDAuNzA1LDEuNzIyIDAuNTgsMi45MTUgLTAuNDM1LDIuMDM0IC0wLjkwMiw0LjYwNyAtMS40LDcuNzMgLTAuMDMsMS40MyAwLjQ4OCwyLjE0NiAxLjU1NiwyLjE0NiAwLjQ2NywwIDEuMjk3LC0wLjQ5OCAyLjUsLTEuNDgzIDAuOTk2LC0wLjgyIDEuODE1LC0xLjU5OCAyLjQ1LC0yLjMyNCBsIDAuOTQyLDEuMjQ0IG0gLTQuMzU3LC0xNy44IGMgLTAuMDMsMC44MyAtMC40NDYsMS42MjggLTEuMjU1LDIuMzk1IC0wLjksMC44NiAtMS45NywxLjI5NiAtMy4yMDQsMS4yOTYgLTEuOSwwIC0yLjgyMiwtMC44MyAtMi43NSwtMi40OSAwLjAzMiwtMC44NiAwLjU0LC0xLjY5IDEuNTI2LC0yLjQ5IEMgMjYuOTcsMC4zOTMgMjguMDU5LDAgMjkuMjYzLDAgYyAwLjcwNSwwIDEuMjg2LDAuMjcgMS43NTMsMC44MiAwLjQ2NywwLjU0IDAuNjg0LDEuMSAwLjY1MywxLjY2IG0gMzUuNjEyLDE3LjggYyAtMC45MzMsMS43NjMgLTIuMjIsMy4zNyAtMy44Niw0LjgwMiAtMi4yNCwxLjkzIC00LjQ3LDIuOTA0IC02LjcsMi45MDQgLTIuMTY4LDAuMDAyIC0zLjIxNiwtMS4yMDIgLTMuMTUzLC0zLjU5OCAwLjAzLC0xLjA3IDAuMjM4LC0yLjM1NSAwLjYyMiwtMy44NSAwLjM4NCwtMS41MDMgMC41OSwtMi42NjUgMC42MjMsLTMuNTA1IDAuMDMsLTEuMjY1IC0wLjM1MywtMS44OTggLTEuMTUyLC0xLjg5OCAtMC44NywwIC0xLjkxLDEuMDM2IC0zLjExMiwzLjEgLTEuMjc2LDIuMTY4IC0xLjk2LDQuMjc0IC0yLjA2NCw2LjMwOCAtMC4wNzMsMS40MyAwLjA3MiwyLjU0IDAuNDI1LDMuMjk4IC0yLjMyNCwwLjA2NCAtMy45NjMsLTAuMzIgLTQuODg2LC0xLjE1IC0wLjgzLC0wLjczNyAtMS4yMTIsLTEuOTUgLTEuMTUsLTMuNjUyIDAuMDMsLTEuMDY4IDAuMTk4LC0yLjEzNyAwLjQ4OCwtMy4yMDUgMC4yOSwtMS4wNyAwLjQ1NywtMi4wMjMgMC40ODgsLTIuODUzIDAuMDYyLC0xLjIzNCAtMC4zODQsLTEuODU3IC0xLjM1LC0xLjg1NyAtMC44NCwwIC0xLjc0LDAuOTU1IC0yLjcwNiwyLjg1MyAtMC45NjYsMS45IC0xLjUwNSwzLjg5IC0xLjYxLDUuOTU2IC0wLjA2LDEuODY3IDAuMDUzLDMuMTc0IDAuMzY0LDMuOSAtMi4yOTMsMC4wNjIgLTMuOTIsLTAuNDE1IC00Ljg3NiwtMS40NTIgLTAuNzk4LC0wLjg2IC0xLjE2LC0yLjE4IC0xLjEsLTMuOTQyIDAuMDMyLC0wLjg2IDAuMTg4LC0yLjA3NSAwLjQ1NywtMy42MiAwLjI4LC0xLjU0NiAwLjQyNSwtMi43NSAwLjQ1NywtMy42MiAwLjA2MiwtMC42MDMgLTAuMDgzLC0wLjkwMyAtMC40NDYsLTAuOTAzIC0wLjE5NywwIC0wLjc2OCwwLjM0IC0xLjcwMiwxLjAxNSBsIC0xLjIwMywtMS4zNDggYyAwLjE2OCwtMC4xMzUgMS4yMTYsLTEuMSAzLjE1NiwtMi45MDUgMS40LC0xLjI5NyAyLjM1NCwtMS45NyAyLjg1MiwtMi4wMDIgMC44NzIsLTAuMDczIDEuNTY3LDAuMjkgMi4xMDYsMS4wOCAwLjUzLDAuNzg3IDAuOCwxLjY5IDAuOCwyLjcyNyAwLDAuMzMyIC0wLjAzMiwwLjY1NCAtMC4xMDUsMC45NTQgMC40OTcsLTAuNzY2IDEuMDgsLTEuNDMgMS43NTIsLTIgMS41MzcsLTEuMzQgMy4yNiwtMi4wODYgNS4xNTcsLTIuMjUyIDEuNjQsLTAuMTM1IDIuOCwwLjI1IDMuNTA1LDEuMTUyIDAuNTcsMC43MzYgMC44MywxLjc4NCAwLjgsMy4xNTMgMC4yMzcsLTAuMTk4IDAuNDg2LC0wLjQxNiAwLjc0NiwtMC42NTQgMC43NjcsLTAuOTAzIDEuNTE0LC0xLjYyIDIuMjUsLTIuMTQ4IDEuMjM1LC0wLjkwMiAyLjUyLC0xLjQgMy44NiwtMS41MDQgMS41OTcsLTAuMTM1IDIuNzUsMC4yNSAzLjQ1NCwxLjE1MiAwLjYwMiwwLjcyNiAwLjg3LDEuNzc0IDAuOCwzLjE0MyAtMC4wMzIsMC45MzMgLTAuMjYsMi4yOCAtMC42NzUsNC4wNjUgLTAuNDE2LDEuNzczIC0wLjYyNCwyLjggLTAuNjI0LDMuMDcgLTAuMDMsMC42OTUgMC4wMywxLjE4MiAwLjE5NywxLjQ0MiAwLjE2NiwwLjI3IDAuNTcsMC4zOTQgMS4yMDMsMC4zOTQgMC40NjcsMCAxLjI5NywtMC40OTcgMi41LC0xLjQ4MiAwLjk5NiwtMC44MiAxLjgxNiwtMS41OTggMi40NSwtMi4zMjQgbCAwLjk2MywxLjI1NCBtIDE4Ljc2NSwtMC4wNTIgYyAtMC45NjUsMS41OTggLTIuODc0LDMuMTk1IC01LjcwNiw0Ljc5MyAtMy41MzgsMi4wMzIgLTcuMTI3LDMuMDUgLTEwLjc1OCwzLjA1IC0yLjcwNiwwIC00LjYzNiwtMC45MDQgLTUuODA4LC0yLjcgLTAuODMsLTEuMjMzIC0xLjIzNCwtMi42OTYgLTEuMjAzLC00LjQwNyAwLjAzLC0yLjY5OCAxLjIzNCwtNS4yNyAzLjYsLTcuNzEgMi42MDMsLTIuNjY1IDUuNjc0LC00LjAwMyA5LjIxLC00LjAwMyAzLjI3LDAgNSwxLjMyOCA1LjIwOCwzLjk5NCAwLjEzNSwxLjcwMiAtMC43OTgsMy40NDUgLTIuOCw1LjI0IC0yLjEzNywxLjk2IC00LjgyNCwzLjIxNSAtOC4wNiwzLjc0NCAwLjYsMC44MyAxLjUwNCwxLjI0NSAyLjcwNywxLjI0NSAyLjM5NiwwIDUuMDIsLTAuNjEzIDcuODYzLC0xLjgzNyAyLjAzMywtMC44NiAzLjYzLC0xLjc1MyA0LjgwMywtMi42NzYgbCAwLjk0NSwxLjI2NSBtIC0xMS4zNiwtNS4yMjggYyAwLjAzMiwtMC44OTIgLTAuMzMsLTEuMzUgLTEuMSwtMS4zNSAtMC45OTQsMCAtMi4wMSwwLjY4NiAtMy4wNDgsMi4wNjYgLTEuMDM4LDEuMzggLTEuNTY3LDIuNjk3IC0xLjU5OCwzLjk2MiAtMC4wMiwwIC0wLjAyLDAuMjE4IDAsMC42NDMgMS42MywtMC42IDMuMDUsLTEuNTE0IDQuMjQyLC0yLjczOCAwLjk2NiwtMS4wNTggMS40NjMsLTEuOTIgMS41MDUsLTIuNTgzIG0gMjQuOTQ2LDEuODY4IGMgLTAuMTM1LDMuMDcyIC0xLjI2NSw1LjcxNyAtMy40MDIsNy45NDcgLTIuMTM1LDIuMjMgLTQuNzksMy4zNSAtNy45NTUsMy4zNSAtMi42MzUsMCAtNC42MzcsLTAuODUgLTYuMDA2LC0yLjU1IC0wLjk5NywtMS4yNjcgLTEuNTU3LC0yLjg1NCAtMS42NSwtNC43NTIgLTAuMTY2LC0yLjg2MyAwLjg2LC01LjQ5OCAzLjEsLTcuODk0IDIuNDA4LC0yLjY2NSA1LjQyNywtMy45OTMgOS4wNTcsLTMuOTkzIDIuMzM0LDAgNC4wOTgsMC43ODggNS4zLDIuMzQ0IDEuMTMyLDEuNDQzIDEuNjUsMy4yOSAxLjU1Nyw1LjU1IG0gLTUuNjY0LC0wLjE4NSBjIDAuMDMsLTAuOTAzIC0wLjA5NCwtMS43MzMgLTAuMzc0LC0yLjQ4IC0wLjI4LC0wLjc0NyAtMC42OTUsLTEuMTMgLTEuMjI0LC0xLjEzIC0xLjcwMiwwIC0zLjEwMiwwLjkyMyAtNC4yMDIsMi43NiAtMC45MzMsMS41MDMgLTEuNDMsMy4xMSAtMS41MDQsNC44MTIgLTAuMDMsMC44NCAwLjExNCwxLjU3NyAwLjQ0NiwyLjIxIDAuMzY0LDAuNzM2IDAuODgyLDEuMSAxLjU1NiwxLjEgMS41MDUsMCAyLjc5LC0wLjg4MyAzLjg2LC0yLjY1NiAwLjg5MiwtMS40NzIgMS4zOCwtMy4wMDggMS40NCwtNC42MTUgaCAwLjAwMiB6IgogICAgIGZpbGw9IiMxMTIyMzMiCiAgICAgaWQ9InBhdGgyIgogICAgIHN0eWxlPSJmaWxsOiNmZmZmZmYiIC8+Cjwvc3ZnPgo=') calc(100% - 1rem) calc(100% - 1rem) / auto 2rem no-repeat;
}
.shortcode-vimeo img {
    display: block;
    aspect-ratio: 1.7777;
    object-fit: cover;
}
@media (max-width: 45rem) {
    .shortcode-vimeo .playbutton {width: 16.5vw; height: 11vw; background-size: 5.3vw; border-radius: 1.78vw;}
    .shortcode-vimeo::after {background-position: calc(100% - 3vw) calc(100% - 3vw); background-size: auto 5vw;}
}
</style>