Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
 <title>JS Bin</title>
</head>
<body>
<div class="row is-flex" id="hg-container">
​
  <div class="col-xs-12 col-sm-12 col-md-6 col-lg-4 mt-4">
    <div class="card hangout">
      <div class="box ">
        <div class="embed-responsive embed-responsive-16by9">
          <iframe class="embed-responsive-item player" src="https://www.youtube.com/embed/hreqPj9geeI?enablejsapi=1&amp;origin=http://localhost:3000"
            id="hreqPj9geeI" style='background-image:url("https://img.youtube.com/vi/hreqPj9geeI/sddefault.jpg")'>
          </iframe>
        </div>
        <div class="card-block">
          <div class="meta">
            <h4 class="card-title"><a href="/events/osra-pp-on-orphan-model">OSRA - PP on Orphan model</a></h4>
            <div class='row' data-event-instance-id=199>
          </div>       
       </div>
    </div>
  </div>
  <div class="col-xs-12 col-sm-12 col-md-6 col-lg-4 mt-4">
    <div class="card hangout">
      <div class="box ">
        <div class="embed-responsive embed-responsive-16by9">
          <iframe class="embed-responsive-item player" src="https://www.youtube.com/embed/i4eWMOKHpZM?enablejsapi=1&amp;origin=http://localhost:3000"
            id="i4eWMOKHpZM" style='background-image:url("https://img.youtube.com/vi/i4eWMOKHpZM/sddefault.jpg")'>
          </iframe>
        </div>
        <div class="card-block">
          <div class="meta">
            <h4 class="card-title"><a href="/events/atlantic-scrum">Atlantic Scrum</a></h4>
            <div class='row' data-event-instance-id=198>
          </div>
        </div>
      </div>
    </div>
  </div>
​
  <div class="col-xs-12 col-sm-12 col-md-6 col-lg-4 mt-4">
    <div class="card hangout">
      <div class="box ">
        <div class="embed-responsive embed-responsive-16by9">
          <iframe class="embed-responsive-item player" src="https://www.youtube.com/embed/sXDHIHmOLKg?enablejsapi=1&amp;origin=http://localhost:3000"
            id="sXDHIHmOLKg" style='background-image:url("https://img.youtube.com/vi/sXDHIHmOLKg/sddefault.jpg")'>
          </iframe>
        </div>
        <div class="card-block">
          <div class="meta">
            <h4 class="card-title"><a href="/events/atlantic-scrum">Atlantic Scrum</a></h4>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>
 
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
​
var players = {}
var player
var currentPlayerId = null
var currentPlayer = null
​
$(document).ready(function(){
  $('#hg-container').on("mouseenter", ".card", function(){
    currentPlayerId = $(this).find('iframe').attr('id');
    player = $(this).find('iframe')[0];
​
    if (!players[currentPlayerId]){
      players[currentPlayerId] = new YT.Player(player, {
        playerVars: { 'autoplay': 1 },
        events: {'onReady': onPlayerReady }
      });
    }
    else{
      currentPlayer = players[currentPlayerId]
      currentPlayer.playVideo();
    }
  });
​
  $('#hg-container').on("mouseleave", ".card", function(){
    currentPlayer.pauseVideo();
    currentPlayer = null;
  });
});
function onPlayerReady(event) {
  currentPlayer = players[currentPlayerId]
  currentPlayer.seekTo(10);
  currentPlayer.playVideo();
}
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers