Sticky Player Demo

dabblet.css

/**
 * Sticky Player Demo
 */
 
body {
	background: #f06;
	background: linear-gradient(45deg, grey, white);
	min-height: 100%;
	margin:0 5%;
}

#content {
	width:1200px;
	position: relative;
}

.stickyPlayer {
	position:fixed;
	display:block;
	top:20px;
	right:20px;
	width:250px!important;
	height:150px!important;
}

#contentLeft {
	float:left;
	width: 900px;
}

#contentRight {
	width:280px;
	margin-left:20px;
	float:left;
}

#streamPlayerContainer {
	height: 500px;
}

#streamPlayerContainer iframe {
	width:100%;
	height:100%;
}

dabblet.html

<div id="content">
	<h1>I Can Haz a Sticky Player!</h1>
	<p>Whilst below the fold!!!</p>
	<div id="contentLeft"> 
		<div id="streamPlayerContainer">
			
			<iframe id="player" src="http://www.ustream.tv/embed/6540154?html5ui" scrolling="no" allowfullscreen webkitallowfullscreen frameborder="0" style="border: 0 none transparent;"></iframe>
			
			<!--
			<iframe id="player" src="https://www.youtube.com/embed/3G8GJQumBFs" frameborder="0" allowfullscreen></iframe>
			-->
		</div>
		<h4>Derpity Doo Dah</h4>		<p>			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel purus sed velit accumsan lacinia ut et purus. Cras convallis diam placerat, finibus ligula vitae, condimentum erat. Integer nulla orci, sodales et ultrices eu, posuere quis nibh. Phasellus sollicitudin sagittis massa quis dictum. Nullam a aliquet ante. In convallis justo at metus tincidunt ullamcorper. Nunc sit amet elit et ante euismod elementum non in elit. Duis consectetur mauris sit amet mollis venenatis. Nulla facilisi. Cras porttitor ante rutrum elementum tempor. Cras convallis vehicula eros, sed varius massa facilisis nec. Suspendisse aliquam magna lacinia odio porttitor, at scelerisque mauris mollis.		</p>		<h4>Derpity Doo Dah</h4>				<p>						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel purus sed velit accumsan lacinia ut et purus. Cras convallis diam placerat, finibus ligula vitae, condimentum erat. Integer nulla orci, sodales et ultrices eu, posuere quis nibh. Phasellus sollicitudin sagittis massa quis dictum. Nullam a aliquet ante. In convallis justo at metus tincidunt ullamcorper. Nunc sit amet elit et ante euismod elementum non in elit. Duis consectetur mauris sit amet mollis venenatis. Nulla facilisi. Cras porttitor ante rutrum elementum tempor. Cras convallis vehicula eros, sed varius massa facilisis nec. Suspendisse aliquam magna lacinia odio porttitor, at scelerisque mauris mollis.				</p>		<h4>Derpity Doo Dah</h4>						<p>									Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel purus sed velit accumsan lacinia ut et purus. Cras convallis diam placerat, finibus ligula vitae, condimentum erat. Integer nulla orci, sodales et ultrices eu, posuere quis nibh. Phasellus sollicitudin sagittis massa quis dictum. Nullam a aliquet ante. In convallis justo at metus tincidunt ullamcorper. Nunc sit amet elit et ante euismod elementum non in elit. Duis consectetur mauris sit amet mollis venenatis. Nulla facilisi. Cras porttitor ante rutrum elementum tempor. Cras convallis vehicula eros, sed varius massa facilisis nec. Suspendisse aliquam magna lacinia odio porttitor, at scelerisque mauris mollis.						</p>		<h4>Derpity Doo Dah</h4>								<p>												Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel purus sed velit accumsan lacinia ut et purus. Cras convallis diam placerat, finibus ligula vitae, condimentum erat. Integer nulla orci, sodales et ultrices eu, posuere quis nibh. Phasellus sollicitudin sagittis massa quis dictum. Nullam a aliquet ante. In convallis justo at metus tincidunt ullamcorper. Nunc sit amet elit et ante euismod elementum non in elit. Duis consectetur mauris sit amet mollis venenatis. Nulla facilisi. Cras porttitor ante rutrum elementum tempor. Cras convallis vehicula eros, sed varius massa facilisis nec. Suspendisse aliquam magna lacinia odio porttitor, at scelerisque mauris mollis.								</p>		<h4>Derpity Doo Dah</h4>										<p>															Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel purus sed velit accumsan lacinia ut et purus. Cras convallis diam placerat, finibus ligula vitae, condimentum erat. Integer nulla orci, sodales et ultrices eu, posuere quis nibh. Phasellus sollicitudin sagittis massa quis dictum. Nullam a aliquet ante. In convallis justo at metus tincidunt ullamcorper. Nunc sit amet elit et ante euismod elementum non in elit. Duis consectetur mauris sit amet mollis venenatis. Nulla facilisi. Cras porttitor ante rutrum elementum tempor. Cras convallis vehicula eros, sed varius massa facilisis nec. Suspendisse aliquam magna lacinia odio porttitor, at scelerisque mauris mollis.										</p>		<h4>Derpity Doo Dah</h4>										<p>															Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel purus sed velit accumsan lacinia ut et purus. Cras convallis diam placerat, finibus ligula vitae, condimentum erat. Integer nulla orci, sodales et ultrices eu, posuere quis nibh. Phasellus sollicitudin sagittis massa quis dictum. Nullam a aliquet ante. In convallis justo at metus tincidunt ullamcorper. Nunc sit amet elit et ante euismod elementum non in elit. Duis consectetur mauris sit amet mollis venenatis. Nulla facilisi. Cras porttitor ante rutrum elementum tempor. Cras convallis vehicula eros, sed varius massa facilisis nec. Suspendisse aliquam magna lacinia odio porttitor, at scelerisque mauris mollis.										</p>
		<h4>Derpity Doo Dah</h4>		<p>			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel purus sed velit accumsan lacinia ut et purus. Cras convallis diam placerat, finibus ligula vitae, condimentum erat. Integer nulla orci, sodales et ultrices eu, posuere quis nibh. Phasellus sollicitudin sagittis massa quis dictum. Nullam a aliquet ante. In convallis justo at metus tincidunt ullamcorper. Nunc sit amet elit et ante euismod elementum non in elit. Duis consectetur mauris sit amet mollis venenatis. Nulla facilisi. Cras porttitor ante rutrum elementum tempor. Cras convallis vehicula eros, sed varius massa facilisis nec. Suspendisse aliquam magna lacinia odio porttitor, at scelerisque mauris mollis.		</p>		<h4>Derpity Doo Dah</h4>				<p>						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel purus sed velit accumsan lacinia ut et purus. Cras convallis diam placerat, finibus ligula vitae, condimentum erat. Integer nulla orci, sodales et ultrices eu, posuere quis nibh. Phasellus sollicitudin sagittis massa quis dictum. Nullam a aliquet ante. In convallis justo at metus tincidunt ullamcorper. Nunc sit amet elit et ante euismod elementum non in elit. Duis consectetur mauris sit amet mollis venenatis. Nulla facilisi. Cras porttitor ante rutrum elementum tempor. Cras convallis vehicula eros, sed varius massa facilisis nec. Suspendisse aliquam magna lacinia odio porttitor, at scelerisque mauris mollis.				</p>		<h4>Derpity Doo Dah</h4>						<p>									Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel purus sed velit accumsan lacinia ut et purus. Cras convallis diam placerat, finibus ligula vitae, condimentum erat. Integer nulla orci, sodales et ultrices eu, posuere quis nibh. Phasellus sollicitudin sagittis massa quis dictum. Nullam a aliquet ante. In convallis justo at metus tincidunt ullamcorper. Nunc sit amet elit et ante euismod elementum non in elit. Duis consectetur mauris sit amet mollis venenatis. Nulla facilisi. Cras porttitor ante rutrum elementum tempor. Cras convallis vehicula eros, sed varius massa facilisis nec. Suspendisse aliquam magna lacinia odio porttitor, at scelerisque mauris mollis.						</p>		<h4>Derpity Doo Dah</h4>								<p>												Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel purus sed velit accumsan lacinia ut et purus. Cras convallis diam placerat, finibus ligula vitae, condimentum erat. Integer nulla orci, sodales et ultrices eu, posuere quis nibh. Phasellus sollicitudin sagittis massa quis dictum. Nullam a aliquet ante. In convallis justo at metus tincidunt ullamcorper. Nunc sit amet elit et ante euismod elementum non in elit. Duis consectetur mauris sit amet mollis venenatis. Nulla facilisi. Cras porttitor ante rutrum elementum tempor. Cras convallis vehicula eros, sed varius massa facilisis nec. Suspendisse aliquam magna lacinia odio porttitor, at scelerisque mauris mollis.								</p>		<h4>Derpity Doo Dah</h4>										<p>															Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel purus sed velit accumsan lacinia ut et purus. Cras convallis diam placerat, finibus ligula vitae, condimentum erat. Integer nulla orci, sodales et ultrices eu, posuere quis nibh. Phasellus sollicitudin sagittis massa quis dictum. Nullam a aliquet ante. In convallis justo at metus tincidunt ullamcorper. Nunc sit amet elit et ante euismod elementum non in elit. Duis consectetur mauris sit amet mollis venenatis. Nulla facilisi. Cras porttitor ante rutrum elementum tempor. Cras convallis vehicula eros, sed varius massa facilisis nec. Suspendisse aliquam magna lacinia odio porttitor, at scelerisque mauris mollis.										</p>		<h4>Derpity Doo Dah</h4>										<p>															Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel purus sed velit accumsan lacinia ut et purus. Cras convallis diam placerat, finibus ligula vitae, condimentum erat. Integer nulla orci, sodales et ultrices eu, posuere quis nibh. Phasellus sollicitudin sagittis massa quis dictum. Nullam a aliquet ante. In convallis justo at metus tincidunt ullamcorper. Nunc sit amet elit et ante euismod elementum non in elit. Duis consectetur mauris sit amet mollis venenatis. Nulla facilisi. Cras porttitor ante rutrum elementum tempor. Cras convallis vehicula eros, sed varius massa facilisis nec. Suspendisse aliquam magna lacinia odio porttitor, at scelerisque mauris mollis.										</p>
	</div>
	<div id="contentRight">
		<h4>Derpity Doo Dah</h4>
		<p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel purus sed velit accumsan lacinia ut et purus. Cras convallis diam placerat, finibus ligula vitae, condimentum erat. Integer nulla orci, sodales et ultrices eu, posuere quis nibh. Phasellus sollicitudin sagittis massa quis dictum. Nullam a aliquet ante. In convallis justo at metus tincidunt ullamcorper. Nunc sit amet elit et ante euismod elementum non in elit. Duis consectetur mauris sit amet mollis venenatis. Nulla facilisi. Cras porttitor ante rutrum elementum tempor. Cras convallis vehicula eros, sed varius massa facilisis nec. Suspendisse aliquam magna lacinia odio porttitor, at scelerisque mauris mollis.
		</p>
		<h4>Derpity Doo Dah</h4>		
		<p>			
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel purus sed velit accumsan lacinia ut et purus. Cras convallis diam placerat, finibus ligula vitae, condimentum erat. Integer nulla orci, sodales et ultrices eu, posuere quis nibh. Phasellus sollicitudin sagittis massa quis dictum. Nullam a aliquet ante. In convallis justo at metus tincidunt ullamcorper. Nunc sit amet elit et ante euismod elementum non in elit. Duis consectetur mauris sit amet mollis venenatis. Nulla facilisi. Cras porttitor ante rutrum elementum tempor. Cras convallis vehicula eros, sed varius massa facilisis nec. Suspendisse aliquam magna lacinia odio porttitor, at scelerisque mauris mollis.		
		</p>
		<h4>Derpity Doo Dah</h4>				
		<p>						
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel purus sed velit accumsan lacinia ut et purus. Cras convallis diam placerat, finibus ligula vitae, condimentum erat. Integer nulla orci, sodales et ultrices eu, posuere quis nibh. Phasellus sollicitudin sagittis massa quis dictum. Nullam a aliquet ante. In convallis justo at metus tincidunt ullamcorper. Nunc sit amet elit et ante euismod elementum non in elit. Duis consectetur mauris sit amet mollis venenatis. Nulla facilisi. Cras porttitor ante rutrum elementum tempor. Cras convallis vehicula eros, sed varius massa facilisis nec. Suspendisse aliquam magna lacinia odio porttitor, at scelerisque mauris mollis.				
		</p>
		<h4>Derpity Doo Dah</h4>						
		<p>									
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel purus sed velit accumsan lacinia ut et purus. Cras convallis diam placerat, finibus ligula vitae, condimentum erat. Integer nulla orci, sodales et ultrices eu, posuere quis nibh. Phasellus sollicitudin sagittis massa quis dictum. Nullam a aliquet ante. In convallis justo at metus tincidunt ullamcorper. Nunc sit amet elit et ante euismod elementum non in elit. Duis consectetur mauris sit amet mollis venenatis. Nulla facilisi. Cras porttitor ante rutrum elementum tempor. Cras convallis vehicula eros, sed varius massa facilisis nec. Suspendisse aliquam magna lacinia odio porttitor, at scelerisque mauris mollis.						
		</p>
		<h4>Derpity Doo Dah</h4>								
		<p>												
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel purus sed velit accumsan lacinia ut et purus. Cras convallis diam placerat, finibus ligula vitae, condimentum erat. Integer nulla orci, sodales et ultrices eu, posuere quis nibh. Phasellus sollicitudin sagittis massa quis dictum. Nullam a aliquet ante. In convallis justo at metus tincidunt ullamcorper. Nunc sit amet elit et ante euismod elementum non in elit. Duis consectetur mauris sit amet mollis venenatis. Nulla facilisi. Cras porttitor ante rutrum elementum tempor. Cras convallis vehicula eros, sed varius massa facilisis nec. Suspendisse aliquam magna lacinia odio porttitor, at scelerisque mauris mollis.								
		</p>
		<h4>Derpity Doo Dah</h4>								
		<p>												
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel purus sed velit accumsan lacinia ut et purus. Cras convallis diam placerat, finibus ligula vitae, condimentum erat. Integer nulla orci, sodales et ultrices eu, posuere quis nibh. Phasellus sollicitudin sagittis massa quis dictum. Nullam a aliquet ante. In convallis justo at metus tincidunt ullamcorper. Nunc sit amet elit et ante euismod elementum non in elit. Duis consectetur mauris sit amet mollis venenatis. Nulla facilisi. Cras porttitor ante rutrum elementum tempor. Cras convallis vehicula eros, sed varius massa facilisis nec. Suspendisse aliquam magna lacinia odio porttitor, at scelerisque mauris mollis.								
		</p>
	</div>
</div>

dabblet.js

window.onscroll = function() { handleScroll() };

function handleScroll() {
	if ( document.body.scrollTop > 600 ) {
		videoToSticky();
	} else {
		videoToNormal();
	}	
}

function videoToSticky() {
	document.getElementById('player').classList.add('stickyPlayer');
}
	
function videoToNormal() {
	el = document.getElementById('player');
	className = "stickyPlayer";
	if (el.classList)  el.classList.remove(className);else  el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
}

settings.json

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