How to hide an image when it's clicked and show a video instead of it ? Using JavaScript

Question

I have a div which contains an image. Under this div, I have another div which contains a video but its display is set to display: none. Here's the question. How to hide the first div when the image is clicked and show the second( the video's div) instead of it?

<div class="picture-section">
    <img id="play-video" src="/images/Play.svg">
    <img src="images/1.jpg">
</div>

<div class="video-section">
    <video width="100%"  autoplay loop>
        <source src="/videos/v1.mp4" type="video/mp4">
    </video>   
</div>

Can't you use the `poster` property? It sounds like you want a thumbnail - `poster` behaves exactly how you have described. — Kobe, Jul 30 '19 at 12:21
https://stackoverflow.com/questions/5278262/click-the-poster-image-the-html5-video-plays — mplungjan, Jul 30 '19 at 14:13

score 0 · Answer 1 · answered Jul 30 '19 at 12:26

You can try with something like this:

var pic = document.getElementById("pic");
var vid = document.getElementById("vid");

var btn = document.getElementById("play-video");

btn.addEventListener("click", function(evt) {
   if (window.getComputedStyle(pic).display == "none") {
       pic.style.display = "";
       vid.style.display = "none";
   } else {
       pic.style.display = "none";
       vid.style.display = ""
   }
});

         <div class="picture-section">
            <img id="play-video" src="/images/Play.svg" alt="Show/Hide Btn">
            <img id="pic" src="images/1.jpg" alt="My Pic">
        </div>

        <div class="video-section">
            <video id="vid"  width="100%"  autoplay loop >
                <source src="/videos/v1.mp4" type="video/mp4">
            </video>   
        </div>

score 0 · Accepted Answer · answered Jul 30 '19 at 12:27

<div class="picture-section">
   <img id="play-video" src="/images/Play.svg">
   <img src="images/1.jpg">
</div>
<div class="video-section">
   <video width="100%" id="vid" style="display:none;" autoplay loop>
      <source src="/videos/v1.mp4" type="video/mp4">
   </video>   
 </div>
<script>
var play = document.getElementById('play-video');
var video = document.getElementById('vid');
play.addEventListener("click",function()
{
play.style.display = "none";
video.style.display = "block";

});
</script>

How to hide an image when it's clicked and show a video instead of it ? Using JavaScript

2 Answers2