<div data-video="87008050" data-title="January in Japan"></div>

		<a class='btn' href='https://matswainson.github.io/jvid/' target='_blank'>github.io/jvid</a>
html{
  background: #43607a url(https://matswainson.github.io/jvid/img/bg.jpg) top center;
  background-size: cover;
  -webkit-font-smoothing:antialiased
}

body {
  font-family: Montserrat, Helvetica, Arial, sans-serif;
  padding: 40px 40px;
}

.btn {
  background: rgba(0, 0, 0, .4);
  border: 2px solid rgba(255, 255, 255, .3);
  border-radius: 10px;
  color: #ced2cc;
  cursor: pointer;
  display: block;
  margin: 0 auto;
  max-width: 140px;
  text-align: center;
  padding: 14px 24px;
  text-decoration: none;
  transition: ease .3s;
  -webkit-transition: ease .3s;
  -moz-transition: ease .3s;
  -o-transition: ease .3s;
}

.btn:hover {
  border-color: rgba(255, 255, 255, .5);
  color: #fff
}

.jVid {
  margin-bottom: 40px;
}
!function(e){e.jVid=function(t,i){function o(e,t){e.style.display="block",t.style.display="none"}function l(){var e=this,t=e.previousElementSibling;src=t.getAttribute("src"),t.setAttribute("src",src+"&autoplay=1"),e.className="poster hide",window.setTimeout(o,700,t,e)}function a(e,t){e.innerHTML=n.replace("{{iframe}}",c[t.type].replace("ID",t.id)).replace("{{thumb}}","vimeo"===t.type?t.thumb:r[t.type].replace("ID",t.id)).replace("{{titleclass}}",t.title?" title":"").replace("{{title}}",t.title?t.title:""),e.getElementsByClassName("poster")[0].addEventListener("click",l)}var s=this;s.$el=e(t),s.defaultOptions={anim:"fade",bgArrow:"light",bgColor:"rgba(0,0,0,.6)",bgShape:"circle",borderColor:"#fff",mini:!1},s.$el.context||(s.$el=e("[data-video]"),i=t),s.options=e.extend({},s.defaultOptions,i),s.options.borderColor="none"===s.options.borderColor?"border:none":"border-color:"+s.options.borderColor;var n='<div class="jVid'+(s.options.anim?" "+s.options.anim:"")+(s.options.mini?" mini":"")+'{{titleclass}}">{{iframe}}<div class="poster"><div class="bg" style="background-image:url({{thumb}})"></div><div class="fade"></div><span class="play '+s.options.bgShape+" "+s.options.bgArrow+'" style="background-color:'+s.options.bgColor+";"+s.options.borderColor+';"></span><span class="title">{{title}}</span></div></div>',r={youtube:"http://img.youtube.com/vi/ID/hqdefault.jpg",vimeo:"https://vimeo.com/api/v2/video/ID.json?callback=showThumb"},c={vimeo:'<iframe src="//player.vimeo.com/video/ID?color=ffffff&title=0&byline=0&portrait=0" webkitallowfullscreen mozallowfullscreen allowfullscreen style="display:none"></iframe>',youtube:'<iframe src="https://www.youtube.com/embed/ID?" allowfullscreen style="display:none"></iframe>'};s.init=function(){s.$el.length&&e.each(s.$el,function(){if("DIV"===this.tagName){var t=this,i={id:this.getAttribute("data-video"),title:this.getAttribute("data-title")};i.type=isNaN(i.id)?"youtube":"vimeo","vimeo"===i.type?e.ajax({dataType:"jsonp",success:function(e){i.thumb=e[0].thumbnail_large,a(t,i)},url:r.vimeo.replace("ID",i.id)}):a(t,i)}})},s.init()},e.fn.jVid=function(t){return this.each(function(){new e.jVid(this,t)})}}(jQuery);

$.jVid({
	anim: 'arrowScale bgScale fade',
	bgColor: '#45bbff',
	bgShape: 'rounded-square',
	borderColor: 'none'
});

External CSS

  1. https://fonts.googleapis.com/css?family=Montserrat:400,700
  2. https://matswainson.github.io/jvid/css/jvid.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js