开发者

Dynamically resizing an embeded video with jQuery?

I've tried a few ways but nothing seems to work. What I'd like to do is have my users pos开发者_Python百科t video's with the given embed code (example):

<object id="cnbcplayer" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="400" height="380" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0">
 <param name="type" value="application/x-shockwave-flash" />
 <param name="allowfullscreen" value="true" />
 <param name="allowscriptaccess" value="always" />
 <param name="quality" value="best" />
 <param name="scale" value="noscale" />
 <param name="wmode" value="transparent" />
 <param name="bgcolor" value="#000000" />
 <param name="salign" value="lt" />
 <param name="src" value="http://plus.cnbc.com/rssvideosearch/action/player/id/1398301408/code/cnbcplayershare" />
 <param name="name" value="cnbcplayer" />
 <embed id="cnbcplayer" 
        type="application/x-shockwave-flash" 
        width="400" 
        height="380" 
        src="http://plus.cnbc.com/rssvideosearch/action/player/id/1398301408/code/cnbcplayershare" 
        name="cnbcplayer" 
        salign="lt" 
        bgcolor="#000000" 
        wmode="transparent" 
        scale="noscale" quality="best" 
        allowscriptaccess="always" allowfullscreen="true">  
 </embed>

But then, I want to resize it to be 300px wide. I've tried updating the attributes with jQuery but that didn't work. Any ideas on what could solve this?

Thanks


Try to place object with width: "100%" into a div and resize that div container.


I wrote this function:

/**
 * resize_embedded resizes embedded videos like youtube videos;
 * Examples: 
 *  - resize_embedded($('youtube_div'), 300, 200);
 *  - Fiddle: http://jsfiddle.net/xjxVC/1
 *
 * Parameters:
 * @param jquery the element that contains the embedded media
 * @param number the new width
 * @param number the new height
 *
 */
function resize_embedded(){

    // Did we receive 3 correct parameters
    if(arguments.length === 3 && $(arguments[0]).length && isNumber(arguments[1]) && isNumber(arguments[2])) 
        ;
    else
        return 0;

    // Clone embedded element
    $c = $(arguments[0]).clone();

    // Resize clone (replace width/height of all children who have them) 
    $c
        .attr('width', arguments[1])
        .attr('height', arguments[2])
        .children().each(function(){     
            $(this).attr('width') && $(this).attr('width', arguments[1]);
            $(this).attr('height') && $(this).attr('height', arguments[2]);
    })

    // Replace target with clone
    $(arguments[0]).replaceWith($c);
}

function isNumber(n){
    return !isNaN(parseFloat(n)) && isFinite(n);
}

Demo: http://jsfiddle.net/xjxVC/1

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜