<div x-data="{ open: false }" markdown="0">
    <a x-on:click="open = true" title="View large image">
        <figure class="image is-16by9">
            <img src="https://via.placeholder.com/400x225" alt="Example image">
        </figure>
    </a>
    <style>
        .iframe-modal {
            max-height: 100%;
            height: 100%;
            width: 100%;
        }
    </style>
    <div class="modal" x-bind:class="open ? 'is-active' : ''" x-cloak>
        <div class="modal-background" x-on:click="open = false"></div>
            
            
            <div class="modal-content">
                <img src="https://via.placeholder.com/120x67" alt="Example image">
            
        </div>
        <button class="modal-close is-large" aria-label="close" x-on:click="open = false"></button>
    </div>
</div>