Add custom mp4 file to Fotorama but without using iframe – Magento 2.4

We would like to load a custom mp4 file on the productpage, directly into the fotorama, but without using a iframe. We do not want to use the YouTube or Vimeo method.

We already found the solution to load a script like below into the Magento_ProductVideo/templates/product/view/gallery.phtml template. But that does load a iframe and we just want to load the video directly in the page, not within a iframe. This also removes any video that’s used trough YouTube or Vimeo. We want to extend it, not remove it.

And we also would like to add the class "fotorama-video-container" so we can see that it is a video, not a image.

So directly like:

<video name="media">
<source src="/media/catalog/video.mp4" type="video/mp4"/>
</video>

Is there a way to achieve this by modifying the code?

Current script:

<script>
    require(['jquery'], function ($) {
        $(document).on('gallery:loaded', function () {
            var $fotorama = jQuery('div.gallery-placeholder > div.fotorama');
            var fotorama = $fotorama.data('fotorama');
            $fotorama.on('fotorama:load', function fotorama_onLoad(e, fotorama, extra) {
                if (extra.frame.type === 'iframe') {
                    extra.frame.$stageFrame.html('<iframe align="middle" type="text/html" width="100%" height="100%" src="' + extra.frame.src + '" frameborder="0" scrolling="no" allowfullscreen autoplay webkitallowfullscreen mozallowfullscreen oallowfullscreen msallowfullscreen></iframe>');
                }
            });
            fotorama.push({
                thumb: '/media/catalog/mp4thumb.jpg',
                src: '/media/catalog/video.mp4',
                type: 'iframe',
                caption: 'Mp4 video caption'
            });
        });
    });
</script>