Youtube video play button

Load preview image of view by id and create new customized play button/ The by click on button load in iframe video by the same id

HTML

<li class="item video-item">
  <div id="play-video-btn" data-id="IfB_K4RGtDo">Play</div>
  <img id="embed-video-preview" src='http://img.youtube.com/vi/IfB_K4RGtDo/sddefault.jpg' />
  <iframe id="embed-video-frame" src="" frameborder="0" width="720px" height="480px" allowfullscreen="true" allowscriptaccess="always"></iframe>
</li>

CSS

li {
  list-style: none;
}

li.video-item {
  position: relative;
  width: 720px;
  height: 480px;
}

li.video-item #play-video-btn {
  border: 3px solid #FF8E0D;
  width: 50px;
  height: 50px;
  position: absolute;
  border-radius: 50%;
  top: 40%;
  left: 40%;
  opacity: 0.7;
  font-size: 0px;
  cursor: pointer;
  background: #ffa727 !important;
  background: -moz-linear-gradient(top, #ffae18 0%, #ff6900 100%) !important;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffae18), color-stop(100%, #ff6900)) !important;
  background: -webkit-linear-gradient(top, #ffae18 0%, #ff6900 100%) !important;
  background: -o-linear-gradient(top, #ffae18 0%, #ff6900 100%);
  background: -ms-linear-gradient(top, #ffae18 0%, #ff6900 100%);
  background: linear-gradient(top, #ffae18 0%, #ff6900 100%) !important;
  -webkit-box-shadow: 0 1px 0 rgba(79, 100, 102, 0.75) !important;
  -moz-box-shadow: 0 1px 0 rgba(79, 100, 102, 0.75) !important;
  box-shadow: 0 1px 0 rgba(79, 100, 102, 0.75) !important;
}

li.video-item #play-video-btn:after {
  content: '';
  position: absolute;
  top: 25%;
  left: 40%;
  width: 0;
  height: 0;
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
  border-left: 18px solid #fff;
}

li.video-item #play-video-btn:hover {
  opacity: 1;
}
.center-cropped {
  width: 100%;
  height: 100%;
  max-width:1270px;
  max-height:550px;
  background-position: center center;
  background-repeat: no-repeat;
  overflow: hidden;
}

/* Set the image to fill its parent and make transparent */
.center-cropped img {
  min-height: 100%;
  min-width: 100%;
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  /* IE 5-7 */
  filter: alpha(opacity=0);
  /* modern browsers */
  opacity: 0;
}

JavaScript

var video = {

  init: function() {
    video.play();
  },

  play: function() {
    jQuery('body').on('click', '#play-video-btn', function(e) {
      video.setSrc(this);
    });
  },

  setSrc: function(el) {
    if (el) {
      var video_id = jQuery(el).data('id');
      var url = '//www.youtube.com/embed/' + video_id + '?enablejsapi=1&version=3&showinfo=0&playerapiid=ytplayer&autoplay=1';
      jQuery('img#embed-video-preview').hide();
      jQuery('#play-video-btn').hide();
      jQuery('iframe#embed-video-frame').attr('src', url).fadeIn();
    }
  }
}

jQuery(document).ready(function() {
  video.init();
});