Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts

    Change Embed Size on Click

    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.

  • #2
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    First of all, width and height are deprecated attributes, use CSS' width and height property instead.

    For your problem, give your embed tag a unique id:
    Code:
    <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:
    Code:
    <script type="text/javascript">
    function adjust()
    	{
    	var vid=document.getElementById('track'); // ID of your embed tag
    	vid.style.width='800px';
    	vid.style.height='800px';
    	}
    </script>
    You can call adjust function on any event you wish:
    Code:
    <input type="button" value="Enlarge" onclick="adjust()">
    Hope that helps.
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • Users who have thanked rangana for this post:

    Scriptet (09-11-2008)

  • #3
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    Hi,

    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.

  • #4
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    Pass the this keyword on adjust function:
    Code:
    <input type="button" value="Enlarge" onclick="adjust(this)">
    ...and use this script instead:
    Code:
    function adjust(inp)
    	{
    	var vid=document.getElementById('track'); // ID of your embed tag
    	if(inp.value.toLowerCase()=='enlarge')
    		{
    		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.
    		}
    	else
    		{
    		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.
    		}
    	}
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •