Jquery 如何将视频播放器控件的文本约束到容器

我有一个视频播放器，它的控件可以在窗口放大/缩小时缩放。如何使总时间、播放时间和时间线与播放/暂停、静音和全屏控件一样符合视频控件div

当前正在使用以下jQuery控制按钮：

$('document').ready(function () {
// resize on dom ready
resizePlayer();

// add window resize binding
$(window).resize(resizePlayer);
});

function resizePlayer() {
    var newWidth = $('.timeline').outerHeight() * 0.25;
    $('.play, .mute, .fullscreen').width(newWidth);
}

---

示例：

我发现，应用相同的功能，可以为字体设置一个百分比，并使用以下公式计算：

var containerSize = $('.video-controls').width();
    var textPercentage = 0.17391304347826086956521739130435; /* 40/230 */
    var textRatio = containerSize * textPercentage;
    var textEms = textRatio / 244;

$('.time-played, .timeline, .time-total').css('fontSize', textEms+"em");