Video Thumbnail

Progressive Enhancements of a Video Thumbnail

by abhishekdev

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.1.0/less.min.js"></script>
<div id="demo">
     <h1>Simple Video Thumbnail</h1>

    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="thumbnail is-small" />
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="thumbnail" />
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="thumbnail has-aspectset is-link" onclick="alert('implement onclick');" />
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="thumbnail is-large" />
    
    <p>
    <strong>No Multi Background Fallback:</strong>
    <img src="//i3.ytimg.com/vi/Ow2cL-pp6p8/hqdefault.jpg" class="thumbnail" />
    </p>
</div>

CSS

.thumbnail{
	@icon_scaleStart: 40%;
	@icon_scaleEnd: 60%;
	@image_scale: 10%;
    
	background-position: 50% 50%, 50% 50%;
    background-repeat: no-repeat;
	background-color: lighten(black, 15%);
    
	/* use for cases when the image triggeres video with some browser event like onclick*/
    &.is-link {
        cursor: pointer;
    }
	
	&.is-large {
        height: 120px;
        width: 213px;
    }
        
    &.is-small {
        height: 60px;
        width: 107px;
    }
    
    .maintainAspectRatio(){
        background-size: auto @icon_scaleStart, auto 100%;
        
        &:hover{
            background-size: auto @icon_scaleEnd, auto (100% + @image_scale);
        }
    }
    
    .stretchToFit(){
        background-size: auto @icon_scaleStart, 100% 100%;
        
        &:hover{
            background-size: auto @icon_scaleEnd, (100% + @image_scale) (100% + @image_scale);
        }
    }
    
    /* by default : behave like HTML images (no aspect ratio set)*/
    .stretchToFit();
    
    &.has-aspectset{
        .maintainAspectRatio();
    }
}

.videolink{
	&:hover{
        /* trigger thumbnail hover states on parent link hover*/
		.thumbnail:extend(.thumbnail:hover){}
        .thumbnail.has-aspectset:extend(.thumbnail.has-aspectset:hover){}
	}
}








/* Sample Images */
body{
    color: #333333;
    font-family: "Helvetica Neue",Helvetica,Arial,Verdana,sans-serif;
    font-size: 13px;
    line-height: 1.4;
    text-rendering: optimizelegibility !important;
    -webkit-font-smoothing: antialiased;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
}

img{
    height: 90px;
    width: 160px;
}

 #demo {
    .thumbnail {
        
        -webkit-transition: background-size 0.2s linear;
        -moz-transition: background-size 0.2s linear;
        -ms-transition: background-size 0.2s linear;
        -o-transition: background-size 0.2s linear;
        transition: background-size 0.2s linear;
        -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
      ...

JavaScript

/*
    jsFiddle does not directly support Less so we need these bits of code to bring it here. 
    
    Twitter: @aaronlayton
    Modified by meri
    Updated by max
*/

// Step 1: Select the style element and change it to text/less
$('head style[type="text/css"]').attr('type', 'text/less');

// Step 2: Set development mode to see errors
less.env = 'development';

// Step 3: Tell Less to refresh the styles
less.refreshStyles();