Lazyload iframe inside bootstrap modal

Question

The demo with the image loading when clicked on Modal button is here: http://www.bootply.com/7kS6Ube98u

I need to place the iframe instead of the image, but have no idea what code to change, so it loads the same way (ie when clicked on the Open Modal button)

Any help is appreciated.

Answer 1

You can simply change the html to use an iframe (without a src attribute), then change the references in the js to iframe to make it clearer. You can see it here

Answer 2

Below is an example of using vanilla JS with Bootstrap 5:

JS:

var modal = document.getElementById('modalId')
modal.addEventListener('show.bs.modal', function (event) {
    var iframe = modal.querySelector('iframe');
    iframe.src = iframe.getAttribute('data-src');
})

HTML:

<div class="modal modal-blur fade" id="modalId" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    Heading
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-0">
                <iframe data-src="http://www.stackoverflow.com" class="w-100"></iframe>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn me-auto" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>