Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/Vipul-Gejage/Disney-Hotstar-Clone/llms.txt

Use this file to discover all available pages before exploring further.

Beneath the hero carousel, Hotstar.html renders a row of five franchise preview cards inside .video-card-container. Each card represents one of the major Disney+ content brands — Disney, Pixar, Marvel, Star Wars, and National Geographic. At rest the card shows a branded logo image; when the user hovers over the card, the logo disappears and a muted, looping preview video starts playing in its place. Moving the cursor away pauses the video and the logo reappears via CSS.

​
File Mapping

FranchiseImage fileVideo file
Disneyimages/disney.PNGvideos/disney.mp4
Pixarimages/pixar.PNGvideos/pixar.mp4
Marvelimages/marvel.PNGvideos/marvel.mp4
Star Warsimages/star-wars.PNGvideos/star-war.mp4
Nat Geoimages/geographic.PNGvideos/geographic.mp4

​
HTML Structure for One Card

<div class="video-card">
    <img src="./images/disney.PNG" class="video-card-image" alt="disney logo">
    <video src="./videos/disney.mp4" muted loop class="card-video"></video>
</div>
Each .video-card contains exactly two children:
  • .video-card-image — a static <img> that is visible by default
  • .card-video — an HTML5 <video> element marked muted and loop, positioned absolutely so it sits behind the image until hover triggers the CSS swap

​
How It Works

​
CSS — Show / Hide Swap on Hover

At rest, both .video-card-image and .card-video fill the card dimensions via width: 100%; height: 100%; object-fit: cover. The .card-video is position: absolute so it underlays the image. On hover, the image is hidden with display: none and the video is switched to position: relative so it takes up the card’s layout space: 
.video-card-image,
.card-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-video {
    position: absolute;
}

.video-card:hover .video-card-image {
    display: none;
}

.video-card:hover .card-video {
    position: relative;
}
The container itself: 
.video-card-container {
    position: relative;
    width: 92%;
    margin: auto;
    height: 10vw;
    display: flex;
    margin-bottom: 20px;
    justify-content: space-between;
}

.video-card {
    position: relative;
    min-width: calc(100%/5-10px);
    width: calc(100%/5-10px);
    height: 100%;
    border-radius: 5px;
    overflow: hidden;
    background-color: #030b17;
}

​
JavaScript — Play and Pause via Mouse Events

A DOMContentLoaded listener in Hotstar.js selects all .video-card elements and attaches mouseenter and mouseleave handlers to each. mouseenter calls video.play() on the card’s <video> child; mouseleave calls video.pause(). The video.currentTime reset (which would rewind to the start on mouse-out) is present in the source but commented out. 
document.addEventListener('DOMContentLoaded', function() {
    const videoCards = document.querySelectorAll('.video-card');

    videoCards.forEach(card => {
        const video = card.querySelector('video');

        card.addEventListener('mouseenter', () => {
            video.play();
        });

        card.addEventListener('mouseleave', () => {
            video.pause();
           // video.currentTime = 0; // Optional: Reset the video to the start
        });
    });
});

​
Adding a New Franchise Card

To add a sixth franchise card, insert a new .video-card div inside .video-card-container in Hotstar.html and provide matching image and video assets: 
<div class="video-card">
    <img src="./images/your-brand.PNG" class="video-card-image" alt="your brand logo">
    <video src="./videos/your-brand.mp4" muted loop class="card-video"></video>
</div>
No JavaScript changes are required — the querySelectorAll('.video-card') call automatically picks up any new cards at page load.
The <video> elements are marked muted and loop in the HTML. Browsers permit programmatic autoplay only for muted videos, so keeping the muted attribute is essential for video.play() to succeed without requiring a prior user gesture.

Build docs developers (and LLMs) love

Get started for freeTalk to us