<div class="js-component relative z-0 bg-grey-50">
<div class="flex flex-col md:flex-auto lg:grid lg:breakout-screen-lg xl:breakout-screen-xl 2xl:breakout-screen-2xl">
<div class="relative py-8 lg:row-start-1 order-last z-10 flex items-center align-end lg:py-24 max-w-screen-xsm md:max-w-screen-md w-full lg:max-w-none mx-auto lg:mx-0 lg:order-none lg:col-start-2 lg:col-end-8 relative">
<div class="px-4 xl:px-6 w-full lg:w-10/12">
<h2 class="text-4xl font-heading font-bold leading-tight text-grey-800">Check this out - with video button</h2>
<div class="block w-full max-w-full prose xl:prose-lg mt-8 ">
<p>Mauris ultricies arcu rhoncus, venenatis nibh non, malesuada nisl. Nam varius finibus lectus at molestie. Proin venenatis nisi eu erat consectetur, sed gravida odio laoreet.</p>
</div>
<div class="mt-6">
<button class="btn bg-alpha text-white border-2 border-alpha hover:border-alpha-800 hover:bg-alpha-800" data-micromodal-trigger="video-modal-1234">
Play full video
</button>
<div class="fixed bg-black/70 z-50 -inset-0 hidden overflow-auto" id="video-modal-1234" aria-hidden="true" data-vanilla-module="Modal">
<div tabindex="-1" class="w-full h-full flex px-4 py-12 lg:px-8" data-micromodal-close>
<div class="js-model-content w-full md:max-w-screen-xl m-auto" role="dialog" aria-modal="true">
<div class="flex justify-end pb-4">
<button class="w-10 h-10 border-white group transition ease-in-out duration-300 hover:bg-white border rounded-full z-20 flex items-center justify-center" aria-label="Close modal" data-micromodal-close>
<svg class="fill-current w-5 h-5 text-white group-hover:text-bravo pointer-events-none">
<use href="/front-end/sprite.svg#icon-close"></use>
</svg>
<span class="sr-only">Close Video Modal</span>
</button>
</div>
<div class="relative aspect-[16/9] bg-black shadow-xl overflow-hidden rounded-md">
<iframe class="absolute top-0 left-0 w-full h-full js-iframe" data-src="https://www.youtube.com/embed/vqNZngMjgko" frameborder="0"></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="lg:row-start-1 relative z-0 lg:order-none lg:row-start-1 lg:col-start-8 lg:col-end-16 lg:angled-mask">
<div class="relative w-full h-full">
<div class="aspect-[16/10]"></div>
<video preload="none" class="lazyload absolute object-cover w-full h-full top-0 left-0" muted autoplay loop playsinline>
<source src="https://player.vimeo.com/external/392924695.hd.mp4?s=5abd506422ab485f2e2174982ef5c07b2e309e38&profile_id=175" type="video/mp4">
</video>
</div>
</div>
</div>
</div>
{% if buttonColour %}
{% set buttonModifier = buttonColour %}
{% else %}
{% set buttonModifier = 'default' %}
{% endif %}
{% if flipped %}
{% set imageContainer = 'order-1 lg:col-start-1 lg:col-end-8 lg:row-start-1 lg:angled-mask-flipped' %}
{% set descriptionContainer = 'order-2 lg:col-start-8 col-end-14 lg:justify-end' %}
{% else %}
{% set imageContainer = 'lg:order-none lg:row-start-1 lg:col-start-8 lg:col-end-16 lg:angled-mask' %}
{% set descriptionContainer = 'lg:order-none lg:col-start-2 lg:col-end-8 relative' %}
{% endif %}
{% if buttonColour %}
{% set buttonModifier = buttonColour %}
{% else %}
{% set buttonModifier = 'default' %}
{% endif %}
{% if theme %}
{% set bgColourClass = theme.bgColour %}
{% set textColourClass = theme.textColour %}
{% set richTextColourClass = theme.richTextColour %}
{% else %}
{% set bgColourClass = 'bg-grey-50' %}
{% set textColourClass = 'text-grey-800' %}
{% set richTextColourClass = '' %}
{% endif %}
<div class="js-component relative z-0 {{bgColourClass}}">
<div class="flex flex-col md:flex-auto lg:grid lg:breakout-screen-lg xl:breakout-screen-xl 2xl:breakout-screen-2xl">
<div class="relative py-8 lg:row-start-1 order-last z-10 flex items-center align-end lg:py-24 max-w-screen-xsm md:max-w-screen-md w-full lg:max-w-none mx-auto lg:mx-0 {{descriptionContainer}}">
<div class="px-4 xl:px-6 w-full lg:w-10/12">
{% if heading %}
<h2 class="text-4xl font-heading font-bold leading-tight {{ textColourClass }}">{{ heading }}</h2>
{% endif %}
{% if description %}
<div class="block w-full max-w-full prose xl:prose-lg mt-8 {{ richTextColourClass }}">
<p>{{ description }}</p>
</div>
{% endif %}
{% if link %}
<div class="mt-6">
{% render "@button--" + buttonModifier, link, true %}
</div>
{% endif %}
</div>
</div>
<div class="lg:row-start-1 relative z-0 {{imageContainer}}">
{% if image %}
{% render "@image-frame", { src: image.src, srcSet: image.srcSet, modifier: 'h-full object-cover', frameModifier: 'h-full', width: 1200, height: 750 } %}
{% elseif backgroundVideo %}
<div class="relative w-full h-full">
<div class="aspect-[16/10]"></div>
<video preload="none" class="lazyload absolute object-cover w-full h-full top-0 left-0" muted autoplay loop playsinline>
<source src="{{backgroundVideo.src}}" type="video/mp4">
</video>
</div>
{% endif %}
</div>
</div>
</div>
{
"siteName": "MentorKit Pattern Library",
"componentModifier": "text-center",
"heading": "Check this out - with video button",
"description": "Mauris ultricies arcu rhoncus, venenatis nibh non, malesuada nisl. Nam varius finibus lectus at molestie. Proin venenatis nisi eu erat consectetur, sed gravida odio laoreet.",
"link": {
"text": "Play full video",
"url": "https://www.youtube.com/embed/vqNZngMjgko",
"modal": true,
"id": "video-modal-1234",
"renderAsButton": true
},
"icon": "icon-play",
"image": "",
"backgroundVideo": {
"src": "https://player.vimeo.com/external/392924695.hd.mp4?s=5abd506422ab485f2e2174982ef5c07b2e309e38&profile_id=175"
}
}
No notes defined.