title: Switch source of embedded Vimeo video clicking on a thumbnail image
body: <p>I have an <code>iframe</code> for embedding a <code>Vimeo video</code> inside a div of a carousel menu. Below the menu there are 2 thumbnail images of the videos. The thumbnails are composed by an image and an overlay play button image (I used <code>z-index</code> for putting it on top). I gave an <code>id</code> to the overlay play button image and I targeted that in the <code>click</code> event for changing the video source in the iframe. (Be sure to click on <code>Galleria video</code> in the carousel menu in order to be able to see what is shown in the screenshot.)</p>
  
  <p><img src="https://i.stack.imgur.com/YijKp.png" alt="video"></p>
  
  <p>I used JQuery for that and I tried 2 ways:</p>
  
  <p><strong>First method</strong>:
  I tried to replace the whole <strong>html</strong> for the <code>iframe</code> inside the <code>div</code></p>
  
  <pre><code>&lt;script&gt;
      $(function() {
      $("#playbutton, #playbutton2").on("click", function(e) {
          var videoplayer = "";
          switch ($(this).prop("id")) {
              case "playbutton":
                  videoplayer = '&lt;iframe src="//player.vimeo.com/video/87204743" width="577" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen&gt;&lt;/iframe&gt;';
                  break;
              case "playbutton2":
                  videoplayer = '&lt;iframe src="//player.vimeo.com/video/87198074" width="577" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen&gt;&lt;/iframe&gt;';
                  break;
                  }
              $("#video-vimeo").html(videoplayer);
              return false;
      })
  })
  &lt;/script&gt;
  </code></pre>
  
  <p><code>#playbutton</code> and <code>playbutton2</code> are the IDs of the overlay play buttons of the thumbnails. <code>videoplayer</code> is a variable I used for storing the html code. <code>#video-vimeo</code> is the <code>ID</code> of the <code>div</code> that contains the embedded video.</p>
  
  <p>See <a href="http://tinyurl.com/lm92cmk" rel="nofollow noreferrer">here</a> for the live page (The JQuery code is at the end of the html page).</p>
  
  <p><strong>Second method</strong>: I tried to replace only the value of the <strong>src</strong> attribute of the <code>iframe</code> inside the <code>div</code></p>
  
  <pre><code>&lt;script&gt;
      $(function() {
      $("#playbutton, #playbutton2").on("click", function(e) {
          var videoplayer = "";
          switch ($(this).prop("id")) {
              case "playbutton":
                  alert("video1");
                  videoplayer = "//player.vimeo.com/video/87204743";
                  break;
              case "playbutton2":
                  alert("video2");
                  videoplayer = "//player.vimeo.com/video/87198074";
                  break;
                  }
              $("#video-iframe").attr("src", videoplayer);
              return false;
      })
  })
  &lt;/script&gt;
  </code></pre>
  
  <p><code>#video-iframe</code> here is the <strong>ID</strong> of the <code>iframe</code> I want to target.</p>
  
  <p>See <a href="http://tinyurl.com/oqeojbm" rel="nofollow noreferrer">here</a> for the live page (The JQuery code is at the end of the html page).</p>
  
  <hr>
  
  <p>I think my ideas should be good but it doesn't work and at the moment I can't see the mistake. I hope you can help me to solve the problem and if you have better ideas feel free to tell me.</p>