CODEWITHSUNDEEP
javascripthtmlcss
Victoria
Victoria

Reputation: 187

Play video on the img click

I´m trying to play my local video on the image click, but somehow, the video does not play. It shows the video "box", but the video wont play. Any ideas how to make the video play after clicking the image?

Thanks a lot! HTML part: Suppose there is video in each img div - for this example, I included only 1 video

<div class="container-gallery" id="portfolio">
        <h1>Portfolio gallery</h1>
        <div class="wrapper-gallery" id="index-gallery">
            <div class="gallery-img img1">
                <div><a href="#">First image</a></div>
                <video class="hidden" width="1000" controls>
                    <source src="../video/#6.mp4" type="video/mp4">
                 </video>
            </div>
            <div class="gallery-img img2">
                <div><a href="#">Second image</a></div>
            </div>
            <div class="gallery-img img3">
                <div><a href="#">Third image</a></div>
            </div>
            <div class="gallery-img img4">
                <div><a href="#">Fourth image</a></div>
            </div>
            <div class="gallery-img img5">
                <div><a href="#">Fifth image</a></div>
            </div>
            <div class="gallery-img img6">
                <div><a href="#">Sixth image</a></div>
            </div>
            <div class="gallery-img img7">
                <div><a href="#">Seventh image</a></div>
            </div>
        </div>
    </div>

CSS Part:

.img-window {
    width: 90vw;
    height: 92vh;
    background-color: rgba(0,0,0,.8);
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
}

.img-window img {
   max-height: 80vh;
   max-width: 80vw;
   z-index: 1000;
}

.hidden {
    display: none;
}

.show {
    display: block;
}

Javascript Part

let galleryImages = document.querySelectorAll('.gallery-img');
let video = document.querySelector('video');
let getLatestOpenedImg;

if(galleryImages) {
    galleryImages.forEach(function(image, index) {
        image.onclick = function(e) {
            e.preventDefault();

            getLatestOpenedImg = index + 1;
            let container = document.body;
            let newVidWindow = document.createElement("div");
            container.appendChild(newVidWindow);
            newVidWindow.setAttribute("class", "img-window");
            newVidWindow.setAttribute("onclick", "closeImg()");

            newVidWindow.appendChild(video);
            video.classList.remove('hidden');
            video.classList.add('show');
            video.play();
        }
    });
}


function closeImg() {
    document.querySelector(".img-window").remove();
}

Upvotes: 1

Views: 1880

Answers (1)

terrymorse
terrymorse

Reputation: 7086

Here's your code unchanged, it seems to be working fine.

Could it be a browser issue that's preventing embedded videos from playing?

let galleryImages = document.querySelectorAll('.gallery-img');
let video = document.querySelector('video');
let getLatestOpenedImg;

if(galleryImages) {
    galleryImages.forEach(function(image, index) {
        image.onclick = function(e) {
            e.preventDefault();

            getLatestOpenedImg = index + 1;
            let container = document.body;
            let newVidWindow = document.createElement("div");
            container.appendChild(newVidWindow);
            newVidWindow.setAttribute("class", "img-window");
            newVidWindow.setAttribute("onclick", "closeImg()");

            newVidWindow.appendChild(video);
            video.classList.remove('hidden');
            // not needed
            //video.classList.add('show'); 
            video.play();
        }
    });
}


function closeImg() {
    document.querySelector(".img-window").remove();
} 
.img-window {
    width: 90vw;
    height: 92vh;
    background-color: rgba(0,0,0,.8);
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
}

.img-window img {
   max-height: 80vh;
   max-width: 80vw;
   z-index: 1000;
}

.hidden {
    display: none;
}

/* not needed
.show {
    display: block;
}
*/
<div class="container-gallery" id="portfolio">
  <h1>Portfolio gallery</h1>
  <div class="wrapper-gallery" id="index-gallery">
    <div class="gallery-img img1">
      <div><a href="#">First image</a></div>
      <video class="hidden" width="1000" controls>
        <source
          src="https://interactive-examples.mdn.mozilla.net/media/examples/flower.mp4"
          type="video/mp4">
      </video>
    </div>
    <div class="gallery-img img2">
      <div><a href="#">Second image</a></div>
    </div>
    <div class="gallery-img img3">
      <div><a href="#">Third image</a></div>
    </div>
    <div class="gallery-img img4">
      <div><a href="#">Fourth image</a></div>
    </div>
    <div class="gallery-img img5">
      <div><a href="#">Fifth image</a></div>
    </div>
    <div class="gallery-img img6">
      <div><a href="#">Sixth image</a></div>
    </div>
    <div class="gallery-img img7">
      <div><a href="#">Seventh image</a></div>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions