use jquery css to change image size on click

Question

I've got an html table that contains videos and images in the list. If you click on any row it plays a video or shows the image in a div.

I also have a size change link to adjust the size of the video or image when clicked.

<div id="player" style="display:block;width:320px;height:240px;background-image:url(http://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/128x128/Circle_Red.png)"></div>
<a id="toggleres" href="#">Change to 640x480</a>
<table id="webcam-table" class="pretty">
                <thead>
                <tr>
                    <th>Name</th>
                    <th>Date Created</th>
                    <th>Length</th>
                </tr>
                </thead>
                <tbody>
                    <tr class="videorow" data-url=http://www.extremetech.com/wp-content/uploads/2012/12/Audi-A1.jpg>
                        <td>
                            testimages 
                        </td>
                        <td>
                            13 Jun 2013 22:01:37 
                        </td>
                        <td>
                            1sec    
                        </td>
                    </tr>
                                        <tr class="videorow" data-url=http://metalstate.files.wordpress.com/2013/03/10-mclaren-p1-cars-to-wait-for-jpg_235623.jpg>
                        <td>
                            testimages 
                        </td>
                        <td>
                            13 Jun 2013 22:01:37 
                        </td>
                        <td>
                            1sec    
                        </td>
                    </tr>
    </tbody>
</table>

You can see any image or play any video when you click the row in the table. At any point you can change the resolution (size) by clicking the link.

    jQuery('#toggleres').click(function(event) { 
        if (jQuery('#toggleres').text() == "Change to 320x240"){
            jQuery(this).html("Change to 640x480");
            jQuery('#player').css({'width':'320px', 'height':'240px', 'background-image': 'url(http://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/128x128/Circle_Red.png)'});
        }
        else{
            jQuery(this).html("Change to 320x240");
            jQuery('#player').css({'width':'640px', 'height':'480px', 'background-image': 'url(http://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/128x128/Circle_Red.png)'});

        }
    });

jQuery("#webcam-table").on("click", "tr.videorow > td", function(e) {
        var parser = document.createElement('a');
        parser.href = theUrl;
            //the right host, therefore it is an image
        if (parser.hostname == "myhost.com")
        {
            jQuery("#player").css("background", "url('" + theUrl + "')");
        }
        else
        {
            flowplayer("player", "js/flowplayer/flowplayer-3.2.12.swf", {
                clip: {
                    url: theUrl,
                    provider: 'rtmp'
                },
                plugins: {
                    rtmp: {
                        url: "js/flowplayer/flowplayer.rtmp-3.2.10.swf",
                        netConnectionUrl: 'rtmp://'+window.location.host+'/recordings'
                    }
                }
            });
        }
}); 

This has worked great for videos without any special consideration, because it opens in a player that will adjust to the div size and keeps playing. Images are different. If you click on a image then try to change the size it just gets reset to the original background. I realize that is exactly what the code is doing but it was just great for videos.

I'm struggling to figure out how I can make this work for both videos and images. Here is a fiddle that illustrates the behavior (at least for images).

Note that the #toggleres click event needs to exist. Someone should be able to toggle the size of the background image without ever clicking a row in the table. In other words if no image or video is clicked the main background placeholder image needs to be there.

To summarize the expected behavior:

1. A background image (320x240) is shown. Someone clicks on the the change resolution link and it will expand to (640x480) - this is currently working with the code below
2. If someone clicks on a row in the table (which could be a video or image) it will change the background image (whether it is 320x240 or 640x480) - this is currently working with the code below
3. If someone clicks another row in the table that image/video will change the background image - this mostly works but if you play a video you can't click another row with an image, it doesn't reset/remove the player
4. Anytime there is a image or video on the screen (after clicking a table row) you can click on the change resolution to make the video or image bigger/smaller - this doesn't work as it will always reset to the background image (the fiddle illustrates this)

Answer 1

Looks like you just need to remove the , 'background-image': 'url(http://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/128x128/Circle_Red.png)' part in the javascript (in both places where it appears). This should do the trick for point 4 of your summary. Not sure about point 3 though - I need to see the code that adds the player to the page in order to determine how to remove it.