Initializing FitVids plugin on Fancybox modal content

Question

I'm trying to initialize the FitVids plugin on Fancybox modal content once that content is loaded. It works perfectly if I use the onUpdate callback for when the user resizes the viewport, but if I try to get it working with afterShow to apply it once the content is shown, I get nothing. I've tested to ensure that afterShow works by throwing in console.log('whatever') and that was successful.

This is the code I'm using:

$('.tile-link.fancybox').click(function() {
    var url = $(this).data('url');
    var getContent = $('.tile-lightbox-content').load(url + ' #lightboxBucketContent');
    $('.tile-lightbox-content').empty();

    $.fancybox({
        content: getContent,
        width: '90%',
        height: '90%',
        type: 'html',
        scrolling: 'no',
        modal: false,
        padding: 20,
        enableEscapeButton: true,
        titleShow: true,
        autoSize: false,
        autoResize: true,
        autoDimensions: false,
        aspectRatio: true,
        helpers: {
            media: true
        },
        // afterShow doesn't work
        afterShow: function() {
            $('.fancybox-inner').fitVids({
                customSelector: 'iframe[src^="http://somewebsite.com"]'
            });
        },
        // onUpdate works correctly
        onUpdate: function() {
            $('.fancybox-inner').fitVids({
                customSelector: 'iframe[src^="http://somewebsite.com"]'
            });
        }
    });
});

I'm using this on a WordPress website where content is loaded into some masonry tiles that trigger a fancybox modal window when clicked and load a portion of a page via the jQuery load function. Everything works dandy with the exception of the FitVids. The tile modal content often contains iframe video embeds and I need them to cooperate on touch/mobile devices.

Thanks in advance.

just curious : do you really need FitVids?, don't videos scale inside fancybox "out of the box"? try the examples at fancyapps.com/fancybox/#examples --> Extended functionality --> media helper — JFK
@JFK I was thinking the same thing but that helper only seems to accomodate for providers like YouTube, Vimeo, Metacafe, etc. It also works for those items when the href of the fancybox URL is directly to the media item itself. With my situation, the modal boxes contain text content that the user writes in the WYSIWYG of a WordPress post and an embedded (iframe) video that is pulled from a third party source that is not one of the mainstream providers listed under the media helper. My client uses a CDN for presenting media and other things to potential clients and publicly. — htmlbot
If you are actually loading the content as inline, try initializing FitVids as a callback of the .load()` method and I guess that would work for what you are trying to do with afterShow — JFK
@JFK Something similar to this? I hadn't thought of that. That's worth trying. — htmlbot
@JFK dude, you're the best. I found something that works. Posting the solution now. Thanks for getting me on the right track. — htmlbot

htmlbot htmlbot · Accepted Answer · 2013-07-02T20:05:04

After tinkering with this for a while trying to figure out why afterShow didn't work but onUpdate did, JFK was able to point me in the right direction and the selected answer to this SO post got me squared away.

Here's the code that works for me:

$('.tile-link.fancybox').click(function() {
    var url = $(this).data('url');
    var getContent = $('.tile-lightbox-content').load(url + ' .lightboxBucketContent', function() {
        $('.lightboxBucketContent').find('.lightbox-video-wrap').each( function(i) {
            $(this).fitVids({
                customSelector: 'iframe[src^="https://somewebsite.com"], iframe[src^="http://somewebsite.com"]'
            });
        });
    });
    $('.tile-lightbox-content').empty();

    $.fancybox({
        width: '90%',
        height: '90%',
        content: getContent,
        type: 'html',
        scrolling: 'no',
        modal: false,
        padding: 20,
        enableEscapeButton: true,
        titleShow: true,
        autoScale: true,
        autoSize: false,
        autoResize: true,
        autoDimensions: false,
        aspectRatio: true,
        helpers: {
            media: true
        },
        onUpdate: function() {
            $('.fancybox-inner').each( function(i) {
                $(this).fitVids({
                    customSelector: 'iframe[src^="https://somewebsite.com"], iframe[src^="http://somewebsite.com"]'
                });
            });
        }
    });
});

Instead of trying to tie the function to Fancybox script itself, JFK suggested tying it to the load() function instead. After some fiddling, that did the trick. So now it will:

Load the content fragment from the URL specified in the data-url parameter of my a element (<a data-url="http://somewebsiteurl.com">...)
Find the container within the loaded content that I want to apply FitVids to
Apply FitVids to every iterance of the container that contains the iframe embed

I also duplicated the same function into the onUpdate callback of Fancybox so that if the user resizes their browser and clicks on a tile that triggers the modal, it will make sure that FitVids is applied after that viewport change. I don't think this part is crucial but it's there.

This is the only thing that has worked for me up to this point so I'm pretty excited. JFK, I owe you a beer (or whatever you prefer).

Initializing FitVids plugin on Fancybox modal content

1 Answers