如何防止视频控件重叠

Question

鉴于以下jQuery控制视频控件的放置，当播放器较大和/或全屏时，播放时间/时间总和声音/全屏控制重叠。我如何防止这样做？

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

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

function resizePlayer() {
    var newWidth = $('.timeline').outerHeight() * 0.25;

    var containerSize = $('.timeline').width();
    var textPercentage = 0.17391; /* 40/230 */
    var textRatio = containerSize * textPercentage;
    var textEms = textRatio / 144;

    $('.play, .pause, .mute, .fullscreen').width(newWidth);
    $('.time-played, .time-total').css('fontSize', textEms+"em");
}

以下是当前代码的小提琴：http://jsfiddle.net/mattography/zq2vzkk5/8/

可以在这里看到：http://jsfiddle.net/mattography/zq2vzkk5/8/show