XF 1.1 Resizing the embedded HTML5 YouTube player

[Cala_Marie]

I've managed to add (incomplete) functionality to my board that allows users to resize embedded YouTube players to predetermined sizes. Static demonstration.

Other goals include:

• Adjust size using gripper.
• Lock iframe to three sizes (480 x 295, 640 x 360, and 853 x 480).
• Give feedback to user during resize operation (let them know what the current dimensions are and what dimensions they're about to change to).
• Fix the UI helper (border that appears then resizing) to the same three sizes listed above.
• Restrict to lower sizes when browser window is small enough?

What the YouTube media site bbcode now embeds:

<div class="bbCodeBlock youTubeEmbed">
    <iframe type="text/html" width="100%" height="100%" src="https://www.youtube.com/embed/{$id}" frameborder="0" window="" allowfullscreen></iframe>
</div>

Added to EXTRA.css:

/* YouTube embedding CSS */
.youTubeEmbed
{
    background: rgb(240, 247, 252);
    padding: 10px;
    width: 480px;
    height: 295px;
}

    .ui-resizable-helper
    {
        border-top: 10px solid #efefef;
        border-right: 10px solid #efefef;
        border-bottom: 25px solid #efefef;
        border-left: 10px solid #efefef;
        border-radius: 2.5px;
        margin: -10px -10px -25px -10px;
    }

Now the unusual part...
I uploaded only the bits of jQuery UI (1.10.3, a version listed as incompatible with jQuery 1.5.x - feel free to slap me around a bit with a large trout for doing so) that I needed to my js folder...
Added to page_container_js_head (I intend to move the stylesheet link to an appropriate template):

<!-- jQuery UI JS -->
<script src="{$javaScriptSource}/jquery/ui/jquery.ui.core.min.js"></script>
<script src="{$javaScriptSource}/jquery/ui/jquery.ui.widget.min.js"></script>
<script src="{$javaScriptSource}/jquery/ui/jquery.ui.mouse.min.js"></script>
<script src="{$javaScriptSource}/jquery/ui/jquery.ui.resizable.min.js"></script>

<!-- jQuery UI CSS -->
<link type="text/css" href="{$javaScriptSource}/jquery/ui/css/jquery-ui-1.10.3.custom.min.css" rel="stylesheet" />

Added to page_container_js_body:

// YouTube embedding JS
$(function () {

    var horz = 480;
    var vert = 295;

    $(".bbCodeBlock.youTubeEmbed").resizable({
        helper: "ui-resizable-helper",
        handles: "se",

        stop: function(event, ui) {
       
            horz = ui.size.width;
            vert = ui.size.height;
           
            if(horz < 559 && vert < 429) {
                $(this).css({
                    "width":"480px",
                    "height":"295px"
                });
            }
            else if(horz > 748 && vert > 421) {
                $(this).css({
                    "width":"853px",
                    "height":"480px"
                });
            }
            else {
                $(this).css({
                    "width":"640px",
                    "height":"360px"
                });
            }
        }
    });
});

Does anyone have any thoughts or ideas regarding improvements I could make? Also, if you have a code suggestion for one of the incomplete goals I listed, please let me know.