title: Open html5 <video> tag content (including video!) in new window
body: <p>I am interested in opening a video in a new window/tab using the  tag, as I'm having intermittent issues with IE not being able to open linked .mp4 files. I have tried to cobble something in javascript together from other answers with my very flawed understanding, but I just can't make it work. Basically, I have videos, I want to be able to use this same code to reference them separately each time with a different link/button/picture and open them in a new window. </p>
  
  <p>Here's my Attempt 1:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;script&gt;
  function nWin () {
      var win = window.open("", "Title", "toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, width=780,     height=200, top="+(screen.height-400)+", left="+(screen.width-840));
      win.document.body.innerHTML = "&lt;html&gt;&lt;body&gt;&lt;video width="90% height="90%" controls&gt;&lt;source src='myvideo.mp4' type="video/mp4"&gt;Your browser does not support the video tag.&lt;/video&gt;&lt;/body&gt;&lt;/html&gt;"; 
  } 
  &lt;/script&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a href="#" onClick="nWin()"&gt;Open&lt;/a&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here's my Attempt 2:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript"&gt;
      $(function() {
        $('#popup').click(function(e) {
          e.preventDefault();
          var w = window.open('about:blank', 'MyWindow', 'width=400,height=400');
          w.document.write('&lt;html&gt;&lt;body&gt;&lt;video width="90% height="90%" controls&gt;&lt;source src='myvideo.mp4' type="video/mp4"&gt;Your browser does not support the video tag.&lt;/video&gt;&lt;/body&gt;&lt;/html&gt;');
          w.document.close();  
        })
      });
    &lt;/script&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Example&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
    &lt;a id="popup" href=""&gt;Open me&lt;/a&gt;
    
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Maybe it is not possible to do this? Maybe I am missing something fundamental about functions. I thank you very sincerely in advance for your help.</p>