jQuery可调整大小，如何在调整帧大小时正确调整视频，字幕文本等的大小？

Question

我使用了包含alsoResize的jQuery resize方法，当我调整帧的div帧时它不能正常工作。

我在这里，

$("#resizable").resizable({   
    minHeight: 690,
    minWidth: 930,
    alsoResize: "#video, #subtitle, #controls, #scroll"       
});

当我使用此代码调整大小时，视频，字幕和其他div处于关闭位置和大小调整。

现在我看看API调整大小功能，发现它可以工作，

$( "#resizable" ).resizable({
    resize: function( event, ui ) {
        //resize video, subtitle text, scroll box, and #control button//
    }
});

当我将div框架调整得更大或更小时，如何计算此函数以正确调整它们的大小？

CSS字幕示例之一，

#subtitle {
    position:absolute;
    width:840px;
    bottom:40px;
    left:50;
    z-index:2000;
    color:white;
    font-weight:bold;
    font-size:150%;
    text-align:center;
}

和html示例，

<div id="resizable" class="ui-widget-content">
        <div id ="draggable" style="background-color:gray;">
            <select id="options">
                <optgroup label="Caption">
                    <option value="off1">Off</option>
                    <option value="1 line">1 line</option>
                    <option selected value="2 line">2 Lines</option>
                    <option value="3 line">3 lines</option>
                </optgroup>
                <optgroup label="Transcript">
                    <option value="off2">Off</option>
                    <option value="4 line">4 Lines</option>
                </optgroup>
            </select>
            <button id="returnPosition" type="button">CC return to Original</button>
        </div>
        <div id="container" class="container">

                <video id="video" width="930" height="500" controls>
                    <source src="caption.mp4" type="video/mp4">
                    <source src="caption.ogg" type="video/ogg" >
                    <source src="caption.webm" type="video/webm" >
                </video> 
                <div id="subtitle" class="subtitle">
                </div>
        </div>
        <div id="controls">
            <button id="rewind5" type="button">5 sec rewind</button>
            <button id="negative3" type="button">-3.0x</button>
            <button id="negative2" type="button">-2.0x</button>
            <button id="negative" type="button">-1.5x</button>
            <button id="normal" type="button">&#x25BA</button>
            <button id="speed" type="button">1.5x</button>
            <button id="speed2" type="button">2.0x</button>
            <button id="speed3" type="button">3.0x</button>
            <button id="forward5" type="button">5 sec fast forward</button>
        </div>
        <div id="scroll" class ="scroll">

        </div>
    </div>