Dropzone JS: Response not parsing facebook video iframe

I am uploading a file to facebook using dropzone js script. File uploads successfully. As response I am returning some html which includes the code to show facebook video:

    <div class="fb-video" 
data-href="https://www.facebook.com/facebook/videos/<?= $video->youtube_id; ?>/" 
data-width="auto" data-show-text="true">
</div>

The code which triggers the upload using Dropzone is:

$(document).ready(function() {
    Dropzone.options.myVideoDropzone = {

        acceptedFiles: 'video/*',
        processing: function(obj, resp) {
            $('.upload-feedback').removeClass('error');
            $('.upload-feedback').removeClass('success');
            $('.upload-feedback').html('Uploading ...');
        },
        error: function(obj, resp) {
            $('.upload-feedback').addClass('error');
            $('.upload-feedback').html('Upload error. Please try again.');
        },
        success: function(obj, resp) {

            try {
                var response = JSON.parse(resp);

                if (response.status) {
                    $('.upload-feedback').addClass('success');
                    $('#list_videos').append(response.html);
                    $('#addvideo').closeModal();
                }
            } catch (e) {
                $('.upload-feedback').addClass('error');
                $('.upload-feedback').html('Error: ' + e);
            }

            this.removeAllFiles();
        }
    };


});

I see the item appended but iframe does not load the video. My guess is that the html response is not being parsed. any suggestions?

Answer

I was missing to parse code prepend using:

FB.XFBML.parse();

Code looks like:

try {
    var response = JSON.parse(resp);

    if (response.status) {
        $('.upload-feedback').addClass('success');
        $('#list_videos').append(response.html);
        FB.XFBML.parse();
        $('#addvideo').closeModal();
    }
} catch (e) {
    $('.upload-feedback').addClass('error');
    $('.upload-feedback').html('Error: ' + e);
}

Advertisement

Answer