Gigaclear 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" data-video-modal data-prev-id="" data-next-id="">
    <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?v=1.2#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 " data-video-container>

                <iframe class="absolute top-0 left-0 w-full h-full js-iframe" data-src="" frameborder="0" allow="autoplay"></iframe>

            </div>
        </div>
    </div>
</div>
 
{% set aspectRatioClass = "aspect-[16/9]" %}

{% set maxWidth = "md:max-w-screen-xl" %}

{% if aspect == "mobile" %}
    {% set maxWidth = "max-w-[450px]" %}
    {% set aspectRatioClass = "aspect-[9/16] mx-auto" %}
{% endif %}

<div class="fixed bg-black/70 z-50 -inset-0 hidden overflow-auto" 
        id="{{id}}" 
        aria-hidden="true" 
        data-vanilla-module="Modal" 
        data-video-modal
        data-prev-id="{{ prevId if prevId else '' }}"
        data-next-id="{{ nextId if nextId else '' }}">
    <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 {{ maxWidth }} 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 {{ aspectRatioClass }} bg-black shadow-xl overflow-hidden rounded-md {% if aspect == 'mobile' %}max-h-[calc(100vh-9.5rem)]{% endif %}" data-video-container>
                {% if prevId %}
                    <button class="js-modal-prev absolute left-4 top-1/2 -translate-y-1/2 z-20 w-10 h-10 bg-alpha shadow-lg rounded-full flex items-center justify-center" aria-label="Previous video" data-target="{{ prevId }}">
                        {% render "@icon", { name: "icon-chevron", modifier: 'fill-current text-white rotate-90 w-4 h-4 relative -ml-1' } %}
                    </button>
                {% endif %}
                <iframe class="absolute top-0 left-0 w-full h-full js-iframe" data-src="{{ url }}" frameborder="0" allow="autoplay"></iframe>
                {% if nextId %}
                    <button class="js-modal-next absolute right-4 top-1/2 -translate-y-1/2 z-20 w-10 h-10 bg-alpha shadow-lg rounded-full flex items-center justify-center" aria-label="Next video" data-target="{{ nextId }}">
                        {% render "@icon", { name: "icon-chevron", modifier: 'fill-current text-white -rotate-90 w-4 h-4 relative -mr-1' } %}
                    </button>
                {% endif %}
            </div>
        </div>
    </div>
</div>
 
{
  "siteName": "Gigaclear Pattern Library"
}

No notes defined.