Toggling between an image (thumbnail) and a video

Question

I'm trying to toggle between an image which is a thumbnail of a video and the video itself. This is the markup:

<img id="thumbnail" src="/templates/beez_20/images/ws_wst2.png" alt="image" />
<video width="100%" height="100%" controls><source src="templates/beez_20/video/ws_wst2.webm"  type='video/webm;codecs="vp8, vorbis"'/>
</video>

I want the image to be shown when the page is loaded and when it is clicked the video to be displayed and the reverse, the video when clicked to return to the image. I've looked online but I've been unable to find any examples that fit. I would be happy with either a CSS or js/jquery solution. Thanks in advance.

Did you take a look at the [poster attribute](https://stackoverflow.com/a/20076039/479156)? — Ivar, Aug 07 '17 at 08:18
Possible duplicate of [How to set the thumbnail image on HTML5 video?](https://stackoverflow.com/questions/20075875/how-to-set-the-thumbnail-image-on-html5-video) — Ivar, Aug 07 '17 at 08:22

score 0 · Answer 1 · answered Aug 07 '17 at 08:23

You can change display:none to display:block with onclick on javascript

function showVid(ele)
{
  document.getElementById("myVideo").style.display = "block";
  ele.style.display = "none"
}

function showImg(ele)
{
  document.getElementById("thumbnail").style.display = "block";
  ele.style.display = "none"
}

#myVideo
{
  display:none;
}

<img id="thumbnail" src="/templates/beez_20/images/ws_wst2.png" alt="image"  onclick="showVid(this)"/>
<video id="myVideo" onclick="showImg(this)" width="100%" height="100%" controls><source src="templates/beez_20/video/ws_wst2.webm"  type='video/webm;codecs="vp8, vorbis"' />
</video>

score 0 · Answer 2 · answered Aug 07 '17 at 08:30

Just for illustration, I created this simple script for you. You can make it respond to clicking the image instead of the button, and replace one image with your video:

https://jsfiddle.net/fhshar93/

<div id="wrapper">

  <img id="img1" src="http://www.html.am/images/samples/remarkables_queenstown_new_zealand-300x225.jpg" />
  <img id="img2" src="http://www.primeliving.at/wp-content/uploads/2016/12/terrasse_ref38_klein_640x480-300x225.jpg" style="display: none" />

</div>

<button onClick="togglethis()">
Toggle images!
</button>



var toggler=true;

function togglethis(){
    if(toggler){
    document.getElementById("img2").style.display="inherit";
    document.getElementById("img1").style.display="none";

  }else{
    document.getElementById("img1").style.display="inherit";
    document.getElementById("img2").style.display="none";

  }
toggler=!toggler;

}

score 0 · Accepted Answer · answered Aug 07 '17 at 08:30

Here you go with a solution https://jsfiddle.net/qhtftprq/

$('#myVideo').click(function(){
   $(this)
    .hide()
    .siblings('#thumbnail')
    .show();
});

$('#thumbnail').click(function(){
   $(this)
    .hide()
    .siblings('#myVideo')
    .show();
});

#myVideo
{
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="thumbnail" src="/templates/beez_20/images/ws_wst2.png" alt="image"/>
<video id="myVideo" width="100%" height="100%" controls><source src="templates/beez_20/video/ws_wst2.webm"  type='video/webm;codecs="vp8, vorbis"' />
</video>

Solution with animation effect https://jsfiddle.net/qhtftprq/1/

$('#myVideo').click(function(){
 $(this)
   .slideUp(function(){
        $('#thumbnail').slideDown();
    });
});

$('#thumbnail').click(function(){
 $(this)
   .slideUp(function(){
     $('#myVideo').slideDown();
    })
});

#myVideo
{
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="thumbnail" src="/templates/beez_20/images/ws_wst2.png" alt="image"/>
<video id="myVideo" width="100%" height="100%" controls><source src="templates/beez_20/video/ws_wst2.webm"  type='video/webm;codecs="vp8, vorbis"' />
</video>

Hope this will help you.

That works perfectly, the animation looks great, thank you. I did forget to mention tho that there will be several images on the page each relating to different videos. Could you please advise how the code should be changed to suit this — RoyS, Aug 07 '17 at 09:48
Here you go with a solution https://jsfiddle.net/qhtftprq/4/ . Multiple image & video wrap them inside a div container.. — Shiladitya, Aug 07 '17 at 09:59
I'm having a problem getting the code run in a Joomla page tho the first single image/video did work OK. Since the jsfiddle works OK, I guess I've made a copying error. Anyhow, many thanks — RoyS, Aug 07 '17 at 11:09
Finally, got these multiple image/video combos working. Just a cache problem :) — RoyS, Aug 08 '17 at 06:04

Toggling between an image (thumbnail) and a video

3 Answers3