How can I show video without black bars / fit iframe to video content in a responsive fancyBox?

Question

I'm using fancyBox 2.1.5 to show images and Vimeo clips. My videos do not all share the same aspect ratio.

At first, 720p videos were showing with horizontal black bars because the default width and height parameters are 800 x 600.

Changing width and height to 1280 x 720 causes my 4:3 videos to have vertical black bars.

Setting width and height to 'auto' shrinks videos to the size of a thumbnail for some reason. (Maybe this is the key to my problem?)

Finally, following advice from a similar topic I added:

afterLoad: function() {
    this.width = $(this.element).data("width");
    this.height = $(this.element).data("height");
}

.. which looks perfect for all videos at full resolution on my monitor, but on mobile I get this:

It looks like it's reading the 1280 x 720 video resolution and having trouble fitting that on a mobile screen. At this point I tried adding aspectRatio: 'true' to no avail.

Here's my current document ready block, in case it's helpful.

$('.fancybox').fancybox({
    helpers: {
        media: {}, // Enable the media helper to better handle video.
        title: {
            type: 'inside'
        } // Put comments within the white border.
    },
    beforeLoad: function() {
        this.title = $(this.element).attr('caption');
    }, // Change the title keyword to 'caption' to avoid title text in tooltips.
    fitToView: false, // Prevent shrinking media to fit title text.
    maxWidth: "100%", // Prevent media from extending past borders with fitToView off.
    afterLoad: function() {
        this.width = $(this.element).data("width");
        this.height = $(this.element).data("height");
    } // Use each element's width and height data attributes to size the iframe.
});

I really just want to display videos like images work by default. Shrink to fit (if needed), keep aspect ratio, no black bars, etc. Is that possible?

Thanks!

Answer 1

I was so close! From my initial post:

At this point I tried adding aspectRatio: 'true' to no avail.

Boolean values should not use quotes, so this wasn't working because of incorrect syntax! Removing the quotes successfully resizes the iframe to the proper dimensions, preventing black bars from appearing on mobile.

So, my final working code for fitting video content to the display area while ignoring title text, on a responsive website without ever introducing black bars is:

<a class="fancybox fitVideo" data-width="800" data-height="450"
caption="Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>"
href="https://vimeo.com/81471924">
<img src="http://placehold.it/200x200">
</a>

Make sure your width and height match the video's dimensions. Next:

$(document).ready(function() {
// Fit video content to display area, ignoring title text.
$('.fitVideo').fancybox({
    helpers: {

        // Enable the media helper to better handle video.
        media: true,

        // Put comments within the white border.
        title: {
            type: 'inside'
        }
    },

    // Do not use this because it tries to fit title text as well.
    fitToView: false,

    // Prevent the introduction of black bars when resized for mobile.
    aspectRatio: true,

    // Restrict content to the display dimensions.
    maxWidth: "100%",
    maxHeight: "100%",

    // Change the title keyword to 'caption' to avoid title text in tooltips.
    beforeLoad: function() {
        this.title = $(this.element).attr('caption');
    },

    // Override the default iframe dimensions with manually set dimensions.
    afterLoad: function() {
        this.width = $(this.element).data("width");
        this.height = $(this.element).data("height");
    }
});
});