Sample video look

dabblet.css

/**
 * Sample video look
 */
@import url('http://awr.org/wp-content/themes/awr-theme/style.css?ver=20171005v1');


.video-wrapper{font-family:"Open Sans";font-size:1em;-webkit-font-smoothing:antialiased}
.video-wrapper{position:relative;margin:1px;padding:0;background-color:rgba(244,244,244,1);overflow:hidden;float:left;}
.video-wrapper{height:335px ;width:595px;}
.video{z-index:-300;margin-left:0;float:left;}
img{width:100%;position:absolute;}
.gradient{background-image:-webkit-gradient(linear,center top,center bottom,from( rgba(0,0,0,0)),to( rgba(0,0,0,.7)));background-image:-webkit-linear-gradient( rgba(0,0,0,0),rgba(0,0,0,.7));position:absolute;bottom:0;left:0;right:0;top:0;margin:0;}
a:hover .gradient{background-image:-webkit-gradient(linear,center top,center bottom,from( rgba(0,0,0,0)),to( rgba(0,0,0,.1)));background-image:-webkit-linear-gradient( rgba(0,0,0,0),rgba(0,0,0,.1));}
.play-button{margin-left:0px;margin-right:0px;color:rgba(255,255,255,1);text-shadow:0 1px 1px black;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;}
.play-button{height:74px;width:74px;position:absolute;bottom:1em;left:1em;background:url('http://awr.org/labs/lib/media/video-play-button@2x.png') no-repeat;background-size:100%;}
a:hover .play-button{background:url('http://awr.org/labs/lib/media/video-play-button-hover@2x.png') no-repeat;background-size:100%;}.video-wrapper:after;{display:table;content:"";clear:both;}
.meta,.meta a,.meta span{padding:1em 0 0;color:rgba(255,255,255,.3);text-align:left;font-weight:bold;font-style:normal;}
.meta .duration:after{content:" | ";text-decoration:none;color:rgba(255,255,255,.15);}
.meta a:hover,.meta a:hover .duration{text-decoration:none;color:rgba(255,255,255,.6);}
.meta .title{font-family:Georgia,serif;font-size:1.2em;font-weight:normal;color:rgba(255,255,255,1);}
.meta a:hover span{text-decoration:none;color:#fff;}
.video-wrapper:hover + .meta a .title,.meta a:hover .title{text-decoration:underline;}



.video-carrousel p{font-style:italic;font-size:1.2em;margin-bottom:.7em;}
a.see-more span{display:inline-block;width:16px;height:17px;background-image:url(http://awr.org/wp-content/themes/awr-theme/images/icon-arrow-go-white.svg);background-size:contain;background-repeat:no-repeat;background-position:0 0;vertical-align:sub;position:relative;transition:transform 200ms ease-out;}
a.see-more:hover span{background-image:url(http://awr.org/wp-content/themes/awr-theme/images/icon-arrow-go-blue.svg);}

dabblet.html

<div class="wrapper clear front-page-section video-carrousel">
	<section class="onepcssgrid-1000 white parallax-content text-center">
		<h2 class="short-underline">Videos</h2>
		<p><a href="/videos/" class="white see-more">See all of our reports <span class="white"></span></a></p>
		<dl class="video-wrapper"><a href="https://www.youtube.com/watch?v=n0dJCHYR1k0">
		<dt></dt>
        <dd id="video_37" class="video poster"><img src="http://awr.org/labs/lib/media/mindoro.jpg" alt=" - "></dd>
		<dd class="gradient"></dd>
		<dd class="play-button"></dd>
		</a>                </dl>                <p class="meta clear text-left"><a href="https://www.youtube.com/watch?v=n0dJCHYR1k0"><span class="duration">7:58</span> <span class="title">1,400 are baptized in Mindoro</span></a></p>                            </section>        </div><!-- .wrapper clear front-page-section -->

dabblet.js

// alert('Hello world!');

settings.json

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