Change flash embed size with javascript or html?

Question

I am trying to scale this video to 640x360. When I change the width and height, the video doesn't get bigger. I tried adding the parameters scale="aspect", scale="exactfit", scale="default". None of them worked.

Is there any way to scale this to 640x360?

Embed Code:

<object width="416" height="374" classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000">
<param name="allowscriptaccess" value="always" />
<param name="movie" value="http://i.cdn.turner.com/cnn/.element/apps/cvp/3.0/swf/cnn_416x234_embed.swf?context=embed&videoId=us/2011/10/28/dnt-mom-learns-death-thru-facebook.wsyr" />
<embed src="http://i.cdn.turner.com/cnn/.element/apps/cvp/3.0/swf/cnn_416x234_embed.swf?context=embed&videoId=us/2011/10/28/dnt-mom-learns-death-thru-facebook.wsyr" type="application/x-shockwave-flash" allowscriptaccess="always" width="416" height="374">
</embed>
</object>

This didn't work either:

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<object width="416" height="374" classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000">
<param name="allowscriptaccess" value="always" />
<param name="movie" value="http://i.cdn.turner.com/cnn/.element/apps/cvp/3.0/swf/cnn_416x234_embed.swf?context=embed&videoId=us/2011/10/28/dnt-mom-learns-death-thru-facebook.wsyr" />
<embed src="http://i.cdn.turner.com/cnn/.element/apps/cvp/3.0/swf/cnn_416x234_embed.swf?context=embed&videoId=us/2011/10/28/dnt-mom-learns-death-thru-facebook.wsyr" type="application/x-shockwave-flash" allowscriptaccess="always" width="416" height="374">
</embed>
</object>

<script>
function testcode () {
    $('object').attr('width','640');
    $('object').attr('height','500');

    $('object embed').attr('width','640');
    $('object embed').attr('height','500');
}

</script>

<br>
<a href="#" onclick="testcode()">click to test</a>

This displays as:

enter image description here

Mansoor Gee · Answer 1 · 2011-10-29T21:08:40.047

2

You can use the following jQuery script:

$(window).resize(function(){


    $('object').attr('width','640');
    $('object').attr('height','360');

    $('object embed').attr('width','640');
    $('object embed').attr('height','360');

});

See the result on JSFiddle

OR

You can use SWF Object. It is an easy-to-use and standards-friendly method to embed Flash content, which utilizes one small JavaScript file.

Edited:

<html>
<head><title>SWF example by jQuery</title></head>
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<object width="416" height="374" classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000">
<param name="allowscriptaccess" value="always" />
<param name="movie" value="http://i.cdn.turner.com/cnn/.element/apps/cvp/3.0/swf/cnn_416x234_embed.swf?context=embed&videoId=us/2011/10/28/dnt-mom-learns-death-thru-facebook.wsyr" />
<embed src="http://i.cdn.turner.com/cnn/.element/apps/cvp/3.0/swf/cnn_416x234_embed.swf?context=embed&videoId=us/2011/10/28/dnt-mom-learns-death-thru-facebook.wsyr" type="application/x-shockwave-flash" allowscriptaccess="always" width="416" height="374">
</embed>
</object>

<script>
function testcode () {
    $('object').attr('width','640');
    $('object').attr('height','500');

    $('object embed').attr('width','640');
    $('object embed').attr('height','500');
}

</script>

<br>
<a href="#" onclick="testcode()">click to test</a>

</body>
</html>

edited Oct 29 '11 at 21:08

answered Oct 29 '11 at 20:08

Mansoor Gee

1,071
8
20

I just tried the jquery code in Google Chrome and IE7, it didn't scale in either browser. What would the code be for SWF Object? – supercoolville Oct 29 '11 at 20:17
Did you reference jQuery library in your code. include this reference: http://code.jquery.com/jquery.min.js It definitely works in chrome and in IE7. – Mansoor Gee Oct 29 '11 at 20:29
I was testing it on the JSFiddle link you posted, but I just tested it in an external html file with jquery and it still didn't work. Also - I was able to get SWFObject to display the swf, but I was not able to get it to scale. – supercoolville Oct 29 '11 at 20:39
Can you update your post with full HTML code along with jQuery liberary reference? – Mansoor Gee Oct 29 '11 at 20:49
Ok I updated it. It resizes the object but does not resize the video inside the object. – supercoolville Oct 29 '11 at 20:51
But where is jQuery reference link. I think you haven't included it. Just include the following before your – Mansoor Gee Oct 29 '11 at 20:56
The jquery is at the top of the new code I just added to my post. – supercoolville Oct 29 '11 at 20:58
See my answer with addition of full html file script. and it works fine in IE and chrome. – Mansoor Gee Oct 29 '11 at 21:10
This is not the code error. Just paste the movie link alone on browser and see the result.(http://i.cdn.turner.com/cnn/.element/apps/cvp/3.0/swf/cnn_416x234_embed.swf?context=embed&videoId=us/2011/10/28/dnt-mom-learns-death-thru-facebook.wsyr) The video is forcefully hard coded to width/height. – Mansoor Gee Oct 29 '11 at 21:32

joelhardi · Answer 2 · 2011-11-03T09:05:00.520

The problem is that you are resizing the browser/DOM's embed element but not actually scaling the content (the Flash animation) that is embedded.

Look at the SWF URL you are referencing: cnn_416x234_embed.swf. The animation is hardcoded to 416x234 and is going to play back at that size no matter what you do to the HTML around it.

A few ways to do what you want:

a) Find a CNN embed URL that is compiled to work at the size you want, 640x360. Then, just hardcode the HTML embed element to that size (unless there's another reason you want to use Javascript).

b) Open up Flash, and create an "animation" that just loads the CNN SWF into a frame and scales it to the size you want. Save and export out to SWF, and embed this animation in your page.

c) Flash is fully scriptable via ActionScript (Javascript and ActionScript are both just ECMAscript), and since you have set allowscriptaccess="always" you should be able to manipulate the animation with Javascript. Run the CNN SWF in a debugger, find out what elements you need to resize, and scale them.

Solution (a) is obviously the simplest and best, assuming it exists, since you'd want to use video that is actually encoded at the size you want, not encoded at 416px wide and then scaled. Personally, if that doesn't work I don't really agree with scaling the video by 1.5x, it's not going to look good.

Edit/add: See my comments below. Because of the cross-domain issue, unfortunately the answer is that it is not possible to manipulate the size of objects inside a third-party SWF (CNN's, in this case). If this were your SWF, or if cross-domain access were enabled in system.Security, then the suggested solutions would work. But in this case, CNN's SWF is locked down so as not to permit cross-domain access.

So, unfortunately, the answer is that if CNN doesn't publish a video widget in the size you want (my (a) solution), you're out of luck, sorry. It's not possible to do what you want. I'll leave the full answer here in case it helps someone else.

"a" - I am almost certain 416x234 is the only embed size. I did a lot of searching and came to that conclusion. "b" - I tried this but got an error. I will try option "c" — supercoolville, Oct 30 '11 at 01:54
I found the elements inside the swf to be resized (title_info_mc, ad_area_mc, bg_mc, video_mask_mc, video_mc, header_mc). How can I resize these thru javascript? (the swf is AS3) — supercoolville, Oct 30 '11 at 02:23
I tried to implement this, and it turns out that (c) is not possible because of the cross-domain protections (i.e. protection against XSS) built into the Adobe plugin. You've set `allowscriptaccess="always"` in your HTML page, but because you're loading a SWF from a different domain than your own, that SWF needs to also set `System.security.allowDomain("yourdomain.com");` -- and since it's CNN's SWF, presumably you're not going to be able to edit it to add this. Sorry about that. — joelhardi, Nov 03 '11 at 08:42
If you want to see this fail, load your HTML page up with the Flash movie embedded, then go to your browser's debugging console. Type `document.getElementsByTagName('embed')[0].GetVariable("title_info_mc");` to try to access variables inside the animation and you'll get the error `Error: Error calling method on NPObject!`. Here's [a question](http://stackoverflow.com/questions/1038668/cross-domain-externalinterface-error-calling-method-on-npobject) that discusses the XSS configuration more ... but the short answer is I don't think this is going to work and I'm going to edit my answer. — joelhardi, Nov 03 '11 at 08:48

score 1 · Answer 3 · answered Oct 29 '11 at 21:47

look at the url of the .swf file that you are embedding. that size is hardcoded in all the .swf files. http://i.cdn.turner.com/cnn/.element/apps/cvp/3.0/swf/cnn_416x234_embed.swf?context=embed&videoId=us/2011/10/28/dnt-mom-learns-death-thru-facebook.wsyr

thats just one of them but that size is hardcoded dude. i guess if you know actionscript you could get up in it, but i don't. maybe you could do it, actually you can i just have no clue how, with javascript.

Change flash embed size with javascript or html?

3 Answers3