Aspect ratio not respected in modal windows

[Diazbesjorge]

I am using a FitVids video inside a modal with a size of 1280x720 (set directly in the html http://prntscr.com/bwsk5j). The problem is that when the browser window is small enough that it can't accommodate the full 1280px it will reduce the width of the modal but we'll keep a fixed height of 720px, resulting in top and bottom black bars.

I struggled to fix this and ended up using some javascript code to solve it. It is far form perfect but it will work as long as you don't vary the aspect ratio of your video.

This is where I create the video modal using http://dinbror.dk/blog/bPopup/

<div class="header-back-buttons helper center">
        <a href="#" class="button stroke rounded large button-icon white js-video-trigger" data-video='<iframe id="modal_video" src="https://player.vimeo.com/video/175927373?autoplay=1" width="1280" height="720" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>'>
            <i class="pe-7s-play video-trigger-play-button"></i>play video </a>
        <a href="login.html" class="button stroke rounded large button-icon white">
            <i class="fa fa-laptop"></i>try it now </a>
</div>

This is the javascript I use to dynamically adjust the height of the video inside the modal:

<script>
        //The following code is used to dynamically adjust the height of the modal video to an aspect ratio of 16:9
        //It works in all modern browsers except IE 10 and below

        //This code will fire when the video modal is opened
        var observer = new MutationObserver(function() {
          if (document.getElementById('modal_video') != null) {
            //The height of the modal video is adjusted based on the automatically resized video width
            //Some rounding is applied in order to only have positive integers
            document.getElementById('modal_video').style.height = (2*Math.round((parseInt(document.defaultView.getComputedStyle(document.getElementById('modal_video'), "").getPropertyValue("width"))/1.777)/2)) + "px";

            observer.disconnect();
            observer = null;
          }
        });
        observer.observe(document.body, {
          childList: true,
          subtree: true
        });

        //This code will fire when the window is resized while the video modal is displayed
        $(document).ready(function(){
            $(window).on("resize",function(e){
                if (document.getElementById('modal_video') != null) {
                    //The height of the modal video is adjusted based on the automatically resized video width
                    //Some rounding is applied in order to only have positive integers
                    document.getElementById('modal_video').style.height = (2*Math.round((parseInt(document.defaultView.getComputedStyle(document.getElementById('modal_video'), "").getPropertyValue("width"))/1.777)/2)) + "px";
                }
            });
        });
</script>

Ideally FitVids should be fixed to avoid this issue. In the meantime I hope this helps somebody else.

[kenhowardpdx]

@Diazbesjorge If you could provide a reduced test case for this I'd be glad to look at the issue. FitVids isn't watching the DOM for new elements so you should apply FitVids when your modal content is generated.