Flowplayer · No timeline on mouseout

no vertical space beneath player

No minimal timeline on mouseout

<head/>

<style>

.flowplayer {
background-color: #777;
 
/* remove vertical space for minimal timeline */
margin-bottom: -3px;
}
/* do not show minimal timeline on mouseout */
.flowplayer.is-mouseout .fp-timeline {
height: 0;
border: 0;
}

CSS

This is the CSS programming equivalent to the following JavaScript instruction:

flowplayer(function (api, root) {
$(root).hover(function (e) {
var over = /enter/.test(e.type);
 
// border mouseover value varies depending on skin
$(".fp-timeline", root).css({
height: over ? 10 : 0,
border: over ? "1px inset" : 0
});
});
});

JavaScript

<body/>

<div data-ratio="0.4167"
data-rtmp="rtmp://s3b78u0kbtx79q.cloudfront.net/cfx/st"
data-embed="false"
class="flowplayer">
 
<video>
<source type="video/webm" src="//edge.flowplayer.org/playful.webm">
<source type="video/mp4" src="//edge.flowplayer.org/playful.mp4">
<source type="video/flash" src="mp4:playful">
</video>
 
</div>

HTML