Untitled

dabblet.css

.video {
	background: #eee;
	width: 600px;
	height: 400px;
	position: relative;
	margin: 5px;
	border: 1px solid #ccc;
	box-shadow: 0 0 7px #aaa;
	overflow: hidden;
}

.video:hover .toolbar {
	height: 50px;
}

.video .toolbar {
	position: absolute;
    width: 100%;
    height: 10px;
    bottom: 0;
    left: 0;
    text-align: center;
	transition: height .3s;
}

.video .toolbar .button {
	height: 50px;
	width: 50px;
	background: green;
	display: inline-block;
	margin: 0 1em;
	border-radius: 50%;
}

.video .toolbar .button.ex {
	background: red;
}

html, body {
    margin: 0; height: 100%; width: 100%; padding: 0;
}

dabblet.html

<div class="video">
	<div class="toolbar">
		<div class="button"></div>
		<div class="button ex"></div>
		<div class="button"></div>
	</div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}