View Full Version : Change Embed Size on Click

09-10-2008, 11:39 PM
Hi there,
I have my Video (youtube embed) set via height and width.
How can I have this so that when the user clicks a button these values change, and the video size as a result updates right in front of the user as the video is still playing?

Here is the basic code I am using to embed a video for your reference:

<embed src="link" type="application/x-shockwave-flash" width="600" height="600"></embed>

Many thanks in advance to anybody who can help me out.

09-11-2008, 05:23 AM
First of all, width and height are deprecated attributes (http://www.codehelp.co.uk/html/deprecated.html), use CSS' width and height property instead.

For your problem, give your embed tag a unique id:

<embed src="link" type="application/x-shockwave-flash" style="width:600px;height:600px" id="track"></embed>

Add highlighted and the one in red are CSS equivalent of deprecated width and height attributes.

And have this script:

<script type="text/javascript">
function adjust()
var vid=document.getElementById('track'); // ID of your embed tag

You can call adjust function on any event you wish:

<input type="button" value="Enlarge" onclick="adjust()">

Hope that helps.

09-11-2008, 02:01 PM

Many thanks for your reply, it's really appreciated. I changed the deprecated attributes as suggested, I guess embed in itself isn't even a valid tag.

Your code worked like a charm I am glad to say and I thank you for it. Now when the user makes the video bigger, I would like a button for them to make it small again. I understand I could just repeat this same code for a smaller size and on another button, but if possible is there anyway to do a one-click toggle?

So once the user clicks enlarge, the text on the button changes to decrease and now if the user clicks the same button again the video will decrease in size back to it's original state?

Again I thankyou for your descriptive and effective post earlier.

09-12-2008, 04:08 AM
Pass the this keyword on adjust function:

<input type="button" value="Enlarge" onclick="adjust(this)">

...and use this script instead:

function adjust(inp)
var vid=document.getElementById('track'); // ID of your embed tag
inp.value='Decrease'; // Change the textbox's value to 'Decrease'.
vid.style.width='800px'; // Adjust the width to Npx.
vid.style.height='800px'; // Adjust the height to Npx.
inp.value='Enlarge'; // Change the textbox's value to 'Enlarge'.
vid.style.width='600px'; // Adjust the width to Npx.
vid.style.height='600px'; // Adjust the height to Npx.