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
精彩评论