CODEWITHSUNDEEP
javascriptvideopreloadvideo-thumbnails
Ivan
Ivan

Reputation: 19

Javascript load a video thumbnail and then play a video after clicking, not working

My current task is to put 5 videos on a website, and they tend to slow down the page load very strongly. So in order to improve performance of a website, I have thought of loading thumbnails and only loading the videos after the user clicks on the thumbnail (or the play button ) I wrote the following code: ` 

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
    document.addEventListener("DOMContentLoaded", function() {
    const videoContainer = document.querySelector(".video-container");
    const videoPlayer = document.getElementById("video");
    const thumbnail = document.querySelector(".thumbnail");
    const playButton = document.querySelector(".play-button");

    videoContainer.addEventListener("click", () => {
        thumbnail.style.display = "none";
        playButton.style.display = "none";
        videoPlayer.style.display = "block";
        videoPlayer.play();
    });
});
    </script>
    <style>

body {
    margin: 0;
    display: flex;
}
.video-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 16px;
    box-sizing: border-box;
    width: 70%;
    align-self: center;
}

.video-container {
    position: relative;
    flex-basis: calc(33.333% - 16px); /* For 3 columns */
    cursor: pointer;
}

.thumbnail {
    width: 100%;
    height: auto;
}

.video-player {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
}

.play-button {
    font-size: 60px;
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.8;
    transition: opacity 0.2s;
}

.play-button:hover {
    opacity: 1;
}

/* Responsive rules */
@media (max-width: 992px) {
    .video-container {
        flex-basis: calc(50% - 16px); /* For 2 columns */
    }
}

@media (max-width: 600px) {
    .video-container {
        flex-basis: 100%; /* For 1 column */
    }
}
    </style>
</head>
<body>
    <div class="video-grid">
        <!-- Video-container for each of the videos -->
        <div class="video-container">
            <img class="thumbnail" src="https://i.natgeofe.com/n/548467d8-c5f1-4551-9f58-6817a8d2c45e/NationalGeographic_2572187_square.jpg" alt="video thumbnail">
            <div class="play-button">&#9658;</div>
            <video id="video" class="video-player" width="100%" height="100%" preload="none">
                <source src="1.mp4" type="video/mp4">
                Your browser does not support the video tag.
            </video>
        </div>
        <!-- End of video-container -->

        <div class="video-container">
            <img class="thumbnail" src="https://i.natgeofe.com/n/548467d8-c5f1-4551-9f58-6817a8d2c45e/NationalGeographic_2572187_square.jpg" alt="video thumbnail">
            <div class="play-button">&#9658;</div>
            <video id="video" class="video-player" width="100%" height="100%" preload="none">
                <source src="2.mp4" type="video/mp4">
                Your browser does not support the video tag.
            </video>
        </div>

        
        <div class="video-container">
            <img class="thumbnail" src="https://i.natgeofe.com/n/548467d8-c5f1-4551-9f58-6817a8d2c45e/NationalGeographic_2572187_square.jpg" alt="video thumbnail">
            <div class="play-button">&#9658;</div>
            <video id="video" class="video-player" width="100%" height="100%" preload="none">
                <source src="3.mp4" type="video/mp4">
                Your browser does not support the video tag.
            </video>
        </div>
        <div class="video-container">
            <img class="thumbnail" src="https://i.natgeofe.com/n/548467d8-c5f1-4551-9f58-6817a8d2c45e/NationalGeographic_2572187_square.jpg" alt="video thumbnail">
            <div class="play-button">&#9658;</div>
            <video id="video" class="video-player" width="100%" height="100%" preload="none">
                <source src="4.mp4" type="video/mp4">
                Your browser does not support the video tag.
            </video>
        </div>
        <div class="video-container">
            <img class="thumbnail" src="https://i.natgeofe.com/n/548467d8-c5f1-4551-9f58-6817a8d2c45e/NationalGeographic_2572187_square.jpg" alt="video thumbnail">
            <div class="play-button">&#9658;</div>
            <video id="video" class="video-player" width="100%" height="100%" preload="none">
                <source src="5.mp4" type="video/mp4">
                Your browser does not support the video tag.
            </video>
        </div>
    </div>
</body>
</html>`

Now the first video in the grid works. But for some reason, no other videos work. Could anyone please help me find the mistake I made, or perhaps propose a better solution? Thank you!

Upvotes: 0

Views: 257

Answers (0)

Related Questions