youtube video

by pongleung

HTML

<div class="wrapembed type-video" data-embed='<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3";
  fjs.parentNode.insertBefore(js, fjs);
}(document, "script", "facebook-jssdk"));</script><div class="fb-video" data-href="https://www.facebook.com/585538961594246/videos/685675434913931/"><blockquote cite="https://www.facebook.com/585538961594246/videos/685675434913931/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/585538961594246/videos/685675434913931/"></a><p>Noah Kingston &amp; Justin Kennedy are back at it! Climbing a 450ft 210-kV Transmission Tower in Saint John, NB!! 

Check out their WILD Instagrams! 
IG - noahmkingston
IG - justinkennedy11</p>Posted by <a href="https://www.facebook.com/Crazy-videos-from-New-Brunswick-585538961594246/">Crazy videos from New Brunswick</a> on Wednesday, July 27, 2016</blockquote></div>'>
  <span class="playbutton"></span>
  <img data-yt="iRusbYIyRNI" class="imgembed doembed" id="homevideo" alt="placeholder" src="https://v.cdn.vine.co/r/thumbs/F35277CC341369438977341480960_50aa76ac465.25.2.B0EF0F4B-AA74-4D2B-8DD7-4C32F9A5E4E6.mp4.jpg?versionId=fuenqCHhJgdvBK9xnI_qUPd_TmTvTSwP"
  />
</div>


<div class="wrapembed type-video" data-embed='<iframe class="vine-embed" src="https://vine.co/v/5mLOKAbthVv/embed/simple" width="600" height="600" frameborder="0"></iframe><script async src="//platform.vine.co/static/scripts/embed.js"></script>'>
  <span class="playbutton"></span>
  <img data-yt="iRusbYIyRNI" class="imgembed doembed" id="homevideo" alt="placeholder" src="https://v.cdn.vine.co/r/thumbs/F35277CC341369438977341480960_50aa76ac465.25.2.B0EF0F4B-AA74-4D2B-8DD7-4C32F9A5E4E6.mp4.jpg?versionId=fuenqCHhJgdvBK9xnI_qUPd_TmTvTSwP"
  />
</div>

<!-- VIDEO 2 -->
<div class="wrapembed type-video" data-embed='<iframe width="487"...

CSS

body {
  margin: 30px
}

iframe {
  /* max-width: 100%; */
}

.imgembed,
.wrapembed {
  position: relative;
  cursor: pointer;
  max-width: 100%;
  min-width: 100%;
  height: auto;
}

.imgembed,
.playbutton {
  cursor: pointer;
}

.type-video .playbutton {
  background: url(http://spiritualtv.org/wp-content/uploads/2016/06/play_med.png) center center no-repeat;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 74px;
  height: 74px;
  margin: -37px 0 0 -37px;
  z-index: 10;
  opacity: .6;
}

.ytvideo {
  position: relative;
  margin: 0;
  padding: 0;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  /* pour anciens Chrome et Safari */
  background-size: cover;
  /* version standardisée */
  cursor: pointer;
}

.ytvideo iframe {
  border-style: none;
  height: 100%;
  width: 100%;
}

.ytvideo .seo {
  display: none;
}

JavaScript

/*http://jsfiddle.net/pongleung/kumson11/10/*/
$(document).on('click', '.wrapembed', function(e) {

  var $this = $(this);

  var dataembed = $this.attr("data-embed");
  var width = $this.attr("width");
  var height = $this.attr("height");

  //var showembed = $(this).prevAll('.showembed');
  //$(this).hide();
  $this.empty();

  $this.html(dataembed);

  // settimeout may not be necessary
	setTimeout(function() {
    $this.find("iframe")[0].src += "?autoplay=1";
  }, 100);


});

/************************************************/