title: HTML5 video. How to start only when clicking on a small static image?
body: <p>I'd like to be able to click on a small thumbnail image and have a video start playing in the full size.  This is similar to one using a small image that one clicks on to show the full image.</p>
  
  <p>I am using this code for the video</p>
  
  <pre><code>&lt;video src="my_movie.ogg" controls&gt;
    Your browser does not support the &lt;code&gt;video&lt;/code&gt; element.
  &lt;/video&gt;
  </code></pre>
  
  <p>Is there a way to set this, similar to youtube, where the there is a small image and clicking on it starts the full size movie, and similar to <a href="http://www.reddit.com/r/videos/" rel="nofollow">http://www.reddit.com/r/videos/</a> ?</p>
  
  <p>If I do</p>
  
  <pre><code>&lt;video src="my_movie.ogg" controls width=100px  height=100px&gt;
  &lt;/video&gt;
  </code></pre>
  
  <p>Then the movie stays too small to see when clicking on it. It would be nice if there are an initial width and run time width to use. But there is not.</p>
  
  <p>Is it possible to also open the movie in a separate pop-up window instead of a new html page? This way the original web page remains in view?</p>
  
  <p>ps. it will be really nice, if the first frame of the movie is displayed as the small image to click on to run the movie, so that I do not have a to make a thumbnail image of each movie to use as the image. </p>
  
  <p>The reason I want to do this, is that the space I have on the page is small and I wanted to put few movies in one row of a table, hence need the sizes to be small initially.</p>
  
  <p>To Chris:</p>
  
  <p>I've used your updated code. This is what happens: Using IE and Chrome, when I click on the images, nothing happens. However, when right-clicking, I see now a menu that has "PLAY" on it. When selecting this, the movie does play. But it only plays in the small size, not the large size.</p>
  
  <p>When I tried my own .ogv file, converted to HTML video from mp4 using online service, the same thing happens. When I click on the image, nothing happens. When I right-click, and select PLAY, it plays. But still using the small size.</p>
  
  <p>Here is the code I used. Which is your code, I just changed the name of the movie to use mine in this one so I can try firefox.</p>
  
  <p>It seems HTML5 video is still not ready for prime time? How to make it work like with u-tube? Click on small image, opens the large size movie in separate window (it will be nice to have a pop-up window for this) but first it has to work in the same web page, which it does not so far.</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;        
  &lt;head&gt;        
  &lt;/head&gt;
  
  &lt;body&gt;    
  
  &lt;script&gt;
    window.onload = function() {
      var videos = document.querySelectorAll(".thumbnail");
      for (var i = 0; i &lt; videos.length; i++) {
          videos[i].addEventListener('click', clickHandler, false);
      };
  
    function clickHandler(el) {
      var mainVideo = document.getElementById("mainVideo");
      mainVideo.src = el.srcElement.currentSrc;
    }
  &lt;/script&gt;
  
  
  &lt;video id="mainVideo" autoplay&gt;&lt;/video&gt;&lt;br/&gt;
  &lt;video class="thumbnail" width=150 height=150&gt;
      &lt;source src="movie.ogv"&gt;
  &lt;/video&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>