title: HTML5 video strange rendering error in Chrome
body: <p>I'm trying to create something where when a user clicks on a miniature version of a HTML5 video, a popup comes up which shows an enlarged version of the video (kind of like Instagram) . </p>
  
  <p>However, there seems to be a strange error only in Chrome, where after I exit out of the popup and reopen it repeatedly by clicking on the blanket (about 3-5 times), the enlarged video fails to render properly in the popup (it shows up as a miniature black screen that wont play). </p>
  
  <p>All other videos will also fail to enlarge properly if I click on them after that point. This occurs when I repeatedly click on a video of 3.6MB but it doesn't seem to occur when I click on a small video of 61KB so I'm not sure if the size of the file has anything to do with it. </p>
  
  <p>Even stranger, when a video fails to render after repeatedly opening and closing the popups, pressing <kbd>CTRL</kbd>+<kbd>SHIFT</kbd>+<kbd>i</kbd>, which brings up the inspector renders the video properly. Adding a click event to the enlarged video with only alert() also renders it properly.</p>
  
  <p>The mp4 file definitely plays properly prior to this happening.</p>
  
  <p>Just noticed something -- the more I open and close the popups, the longer it takes Chrome to refresh the page, and it says either "Processing Request" or "Waiting for available socket" at the bottom left corner.</p>
  
  <p><strong>New Update</strong> - It seems the issue is related to sockets. I'm not really familiar with the subject, but Chrome has "6 sockets max per group". Each time I fetch the <code>src</code> from the smaller thumbnail video, and insert it into the larger video, through this code: </p>
  
  <pre><code>var media_to_append=...;
  </code></pre>
  
  <p>It creates a new socket. This occurs for a 3.6M video and not a 61K video or images. When I reach the limit of 6 sockets for localhost, the expanded video fails to render. Strangely, <kbd>CTRL</kbd>+<kbd>SHIFT</kbd>+<kbd>i</kbd> removes 2 active sockets, and <code>alert();</code> removes 4, allowing me to create more sockets through every video click. </p>
  
  <p>Does anyone know how to fix this issue- by not creating sockets?</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id='video_container' style='height:150px; width:150px; background:black;'&gt;
  &lt;video style="max-width:100%; max-height:100%;"&gt;
       &lt;source src='some_file.mp4' type="video/mp4"&gt;&lt;/source&gt;
  &lt;/video&gt;&lt;/div&gt;
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>$("#video_container").click(function(){
      var src=$("#video_container").find("video").find("source").attr("src");
      var blanket=$("&lt;div class='blanket' id='view_media_blanket' onclick='$(\"#view_media_popup\").remove(); $(this).remove();' style='z-index:15; background:#111; opacity:0.65; width:100%; height:100%; position:fixed; top:0px; left:0px;'&gt;&lt;/div&gt;");
      $(document.body).append(blanket);
      var popup_height=600;
      var popup=$("&lt;div id='view_media_popup' style='text-align:center; z-index:15; width:1000px; height:"+popup_height+"px; position:fixed; top:50%; left:50%; margin-left:-500px; margin-top:-300px;  background:white;'&gt;&lt;/div&gt;");
      $(document.body).append(popup); 
  
      var media_to_append=$('&lt;video class="expanded_media" data-type="video" style=" position:absolute; left:0px; right:0px; top:0px; bottom:0px; margin:auto; cursor:pointer; max-width:100%; max-height:100%;" controls &gt;&lt;source  src="'+src+'"  type="video/mp4"&gt;&lt;/source&gt;&lt;/video&gt;');
  
      $(media_to_append).click(function(e) {///if the rendering of the video fails, clicking on it with an alert(); or pressing CTRL SHIFT i renders it properly.
          alert();
      });
  
      popup.append(media_to_append);
  });
  </code></pre>