Question

Ok, so this is my first post so I’ll try not to sound to noobish here…..

I am working on a project on my corporate site and am having issues with some video. I am grabbing some video through an AJAX call and placing it into a YUI panel to create my own video lightbox. Everything is working fine in all browsers except, of course, IE(8 specifically since we just gave up supporting 7). I can get the panel to open and display the flash player but it won’t load the .flv or the player controls. Like I said, fine in all other browsers. Here is the main script I am working with:

/**
 * Function to lazy load, then show the video panel with the content of the link passed in inside the panel
 */
var showVideoPanel = function(e, linkEl){
    Event.preventDefault(e);    

    if(!YAHOO.env.getVersion("videoPanel")) {           
        var successHandler = function() {               
            videoPanel = new COUNTRY.widget.VideoPanel("videoPanel", " ");              
            showVideoPanel(e, linkEl);
        };

        //this is not likely to go off (404 is not considered an error)
        var failureHandler = function() {
            window.location = linkEl.href;
            return;
        };

        COUNTRY.loadComponent("videoPanel", successHandler, failureHandler);
    } 
    else {              
        COUNTRY.util.Ajax.getRemoteContent('GET', linkEl.href, videoPanel.body, {
            success: function(o){                           
                var start, end, el;
                el = Dom.get(videoPanel.body);
                start = o.responseText.indexOf('<object');
                end = o.responseText.indexOf('</object>', start);                   
                el.innerHTML = o.responseText.substring(start, end);
            },
            failure: function(o){       
                el = Dom.get(videoPanel.body);          
                el.innerHTML = "The requested content is currently unavailable. Please try again later.";
            }                       
        }); 
        var bod = Dom.get(videoPanel.body);
        COUNTRY.util.Flash.flashControl(bod.getElementsByTagName("FORM")[0]);


        videoPanel.show(linkEl);        
    }
};

Answer 1

I solved this originally by dumping the the data from the AJAX call into an object tag, which solved the problem and worked cross browser perfectly.

We have since changed how we serve media, so I ended up using Vimeo to host the videos which was very simple and works wonderfully.