{ Snipperize }

Youtube HTML5 Video Player Makeup

<div id="video-player"> 
	<video width="640" height="360" src="/demo/google_main.mp4?2" autobuffer> 
		<div class="video-fallback"> 
			<br>You must have an HTML5 capable browser.
		</div> 
	</video> 
	<div class="controls"> 
		<button class="play-button"></button> 
		<div class="progress-bar"> 
			<div class="progress-list"> 
				<progress class="load-progress" value="0" style="width: 0%;"></progress> 
				<progress class="play-progress" value="0" style="width: 0%;"></progress> 
				<!-- I do not like using a transparent gif, but have not figured out how to prevent the image from dragging - czacharias --> 
				<a href="#" class="scrubber-button" style="left: 0%;"><img src="/demo/transp.gif" width="16" height="16"></a> 
			</div> 
			<span class="progress-text"><time class="current-time">00:00</time> / <time class="duration-time">00:00</time></span> 
		</div> 
		<button class="volume-button" value="max">
			<div class="volume-panel">
				<div class="volume-channel">
					<a href="#" class="volume-slider" style="top: 0%;"><img src="/demo/transp.gif" width="20" height="10"></a>
				</div>
			</div>
		</button> 
		<button class="hd-button" value="on"></button> 
		<button class="fullscreen-button"></button> 
		<button class="menu-button"></button> 
	</div> 
	<div class="stats"> 
		<meter class="rating-stars"></meter> 
		<span class="rating-count">158 ratings</span> 
		<span class="view-count"><strong>311,916</strong> views</span> 
	</div> 
</div>

Pure HTML5 video player makeup.

Created by ThePeppersStudio (241 days, 6.35 hours ago)