MentorKit Pattern Library

Video Modal 

<div class="fixed bg-black/70 z-50 -inset-0 hidden overflow-auto" id="" 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="" frameborder="0"></iframe>
            </div>
        </div>
    </div>
</div>
 
<div class="fixed bg-black/70 z-50 -inset-0 hidden overflow-auto" id="{{id}}" 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>
                    {% render "@icon", { name: "icon-close", modifier: "fill-current w-5 h-5 text-white group-hover:text-bravo pointer-events-none" } %}
                    <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="{{ url }}" frameborder="0"></iframe>
            </div>
        </div>
    </div>
</div>
 
{
  "siteName": "MentorKit Pattern Library"
}

No notes defined.