Toggle the SWFobject fallback manually=

Question

I try to create a page where it displays a flash element on full-size, but when i view the site on a smaller screen i want to trigger the fallback.

This does not work for me now, because the browser supports flash.

I can't find a way to toggle the fallback manually.

Answer 1

The fallback can't be triggered manually, but you can prevent the SWF from loading if certain criteria aren't met. In your case, you said you only need to embed the SWF if the viewport meets a specified minimum size.

If you're attempting to load the SWF on initial page load, just do something like this:

//Viewport function based on 
//http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/
function GetViewportDimensions(){

    var de = document.documentElement,
        b = document.getElementsByTagName('body')[0],
        w = window.innerWidth || (de && de.clientWidth) ? de.clientWidth : b.clientWidth,
        h = window.innerHeight || (de && de.clientHeight) ? de.clientHeight : b.clientHeight;

    return { width: w, height: h };

}

swfobject.addDomLoadEvent(function(){

    var actualDimensions = GetViewportDimensions(),
        minimumWidth = 600,
        minimumHeight = 500;

    if(actualDimensions.width >= minimumWidth && actualDimensions.height >= minimumHeight){
        swfobject.embedSWF("mymovie.swf", "flashcontent", "550", "400", "9");
    } else {
        //do nothing, use fallback
    }

});

This code will only attempt to embed the SWF if the viewport is large enough. If Flash is not present, swfobject.embedSWF will fail and your fallback content will remain in place.