title: Change image to video
body: <p>I have a picture gallery where you can change the displayed image by "mouse entering" thumbnails shown on the same page.
  Now I want to add a video to the gallery and it doesn't work with the code I provided for the images.
  The problem is that I want the pictures and the video to stay a certain size. Since I want to add a video the img tag won't show the video as a source and when I change the img to iframe the video works just fine but the pictures aren't responsive anymore. Here's my code:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="slide_work"&gt;
   &lt;img src="images/Illustration/puzzled.png"&gt;
  &lt;/div&gt;
  
  &lt;div class="slide_thumbs"&gt;
   &lt;div id ="thumbs_active" class="puzzled_img" style="background-image:url(images/Illustration/puzzled_img.png);"&gt;&lt;/div&gt;
   &lt;div class="puzzled_vid" style="background-image:url(images/Illustration/puzzled_vid.png);"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.slide_work &gt; img {
   float:right;
   height:auto;
   width:auto;
   max-height:70vh;
   max-width:100%;
  
   -webkit-transition: all 0.5s;
   -moz-transition: all 0.5s;
   -o-transition: all 0.5s;
   transition: all 0.5s;
  }
  </code></pre>
  
  <p>(I tried adding another block to the CSS where I change the "img" to "iframe" but it doesn't do anything in terms of the responsiveness of the images.)</p>
  
  <p>JavaScript</p>
  
  <pre><code>$( ".puzzled_img" )
   .mouseenter(function() {
    $(".puzzled").attr('src', 'images/Illustration/puzzled.png');
    $(this).attr('id', 'thumbs_active');
    $(".puzzled_vid").removeAttr('id', 'thumbs_active');
  })
  
  $( ".puzzled_vid" )
   .mouseenter(function() {
    $(".puzzled").attr('src', 'https://player.vimeo.com/video/12345678');
    $(this).attr('id', 'thumbs_active');
    $(".puzzled_img").removeAttr('id', 'thumbs_active');
  })
  </code></pre>