<!DOCTYPE html>
<html>
  <head>
    <title>jquery.ooyala - Basic Usage (HTML)</title>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
      #element {
        max-width: 100%;
        width: 600px;
        height: 400px;
        margin: 0 auto;
        padding-bottom: 1em;
      }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <script src="../src/jquery.ooyala.js"></script>
  </head>
  <body>
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-6">
          <h2>Output</h2>
          <div id="element"
               class="oo-player"
               data-player-id="e18ab1da1813483499554ea2d8e67fbd"
               data-content-id="M0dTZ0bTqdn5iPEJDDcK87Gq5tfBL8wO"
               ></div>
        </div>
        <div class="col-md-6">
          <div id="element"
               class="oo-player"
               data-player-id="e18ab1da1813483499554ea2d8e67fbd"
               data-content-id="M0dTZ0bTqdn5iPEJDDcK87Gq5tfBL8wO"
               ></div>
        </div>
        <div class="col-md-6">
          <h2>Markup</h2>
          <pre><code>
          &lt;div id="element"
               class="oo-player"
               data-player-id="e18ab1da1813483499554ea2d8e67fbd"
               data-content-id="M0dTZ0bTqdn5iPEJDDcK87Gq5tfBL8wO"
               &gt;&lt;/div&gt;
          &lt;div id="element"
               class="oo-player"
               data-player-id="e18ab1da1813483499554ea2d8e67fbd"
               data-content-id="M0dTZ0bTqdn5iPEJDDcK87Gq5tfBL8wO"
               &gt;&lt;/div&gt;
          </code></pre>
        </div>
      </div>
    </div>
  </body>
</html>

Add demo which shows two same-content players functioning correctly
Add demo which shows two same-content players functioning correctly