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.

All content in the Disney+ Hotstar Clone is hardcoded directly in Hotstar.html — there is no database, API, or CMS. Adding new items means copying an existing HTML block, placing it in the correct position in the file, and updating the image src, title text, and description. The JavaScript in Hotstar.js attaches behavior to CSS class names rather than specific IDs, so any element you add with the right class will automatically gain carousel animation, hover-play video, or watchlist alert behavior. The hero banner is built from a series of .slider divs nested inside .carousel. Each slide holds a text overlay and a full-bleed banner image. Here is the exact HTML structure for one slide as it appears in Hotstar.html: 
<div class="slider">
    <div class="slide-content">
        <h1 class="movie-title">Loki</h1>
        <p class="movie-des">Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit possimus
            quibusdam exercitationem, esse veniam nulla!</p>
    </div>
    <img src="images/slider 1.PNG" alt="Loki">
</div>
To add a new slide:
1

Copy the block

Copy any existing .slider div and paste it as the last child inside the .carousel div, before the closing </div> that ends the carousel.
2

Update the title

Replace the text inside <h1 class="movie-title"> with your show or movie title.
3

Update the description

Replace the text inside <p class="movie-des"> with a short description of the content.
4

Replace the image

Change the src attribute on the <img> tag to point to your banner image. Place the image file in the images/ folder and reference it as images/your-image.png. Also update the alt attribute to match the title.
The cloneSlides() function in Hotstar.js reads all .slider elements that exist in the DOM at page load and clones them to create seamless looping. Your new slide will be picked up automatically — no JavaScript changes are needed. 
function cloneSlides() {
    slides.forEach(slide => {
        const clone = slide.cloneNode(true);
        carousel.appendChild(clone);
    });
}
Recommended image dimensions: The .carousel-container is 450px tall and the image is sized at width: 70% with min-height: 100%. Use a wide landscape banner at least 1200 × 500px — images shorter than 450px will be stretched by object-fit: cover. A 16:9 or wider aspect ratio works best.

​
Adding a Franchise Video Card

The franchise strip below the hero banner contains five .video-card elements, each showing a logo image at rest and playing a looping video on hover. The HTML for one card from Hotstar.html is: 
<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>
To add a new franchise card:
1

Add your media files

Place your logo image in the images/ folder and your video file in the videos/ folder.
2

Copy the block

Copy any existing .video-card div and paste it as the last child inside .video-card-container.
3

Update the image

Set the src on the <img class="video-card-image"> tag to your new logo file, e.g., ./images/your-brand.PNG. Update alt to describe the logo.
4

Update the video

Set the src on the <video class="card-video"> tag to your new video file, e.g., ./videos/your-brand.mp4. Keep the muted and loop attributes in place.
The hover-play behavior in Hotstar.js queries all .video-card elements and attaches mouseenter / mouseleave listeners to each one. Any new card you add with the .video-card class will work automatically. 
const videoCards = document.querySelectorAll('.video-card');

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

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

    card.addEventListener('mouseleave', () => {
        video.pause();
    });
});
Videos must have the muted attribute — browsers block autoplay for unmuted videos. Use compressed MP4 files; large video files will significantly slow the initial page load since all five (or more) video elements are loaded with the page even before hovering.

​
Adding a Movie Card to a Row

Movie poster cards appear in horizontal scrollable rows. Each row has a heading (<h1 class="title">) followed by a .movies-list wrapper containing a .card-container. The HTML for one card from Hotstar.html is: 
<div class="card">
    <img src="./images/latest 1.png" class="card-img" alt="l1">
    <div class="card-body">
        <h2 class="name">Mission Mangal</h2>
        <h6 class="des">This is the best marvel show</h6>
        <button class="watchlist-btn" onclick="showFullscreenAlert()">Add to watchlist</button>
    </div>
</div>
To add a new movie card:
1

Place your poster image

Add your poster image file to the images/ folder.
2

Copy the block

Copy any existing .card div and paste it as the last child inside the target .card-container.
3

Update the image

Set the src on <img class="card-img"> to your poster file, e.g., ./images/latest 11.png. Update the alt attribute accordingly.
4

Update the title and description

Replace the text inside <h2 class="name"> with the movie or show title. Replace the text inside <h6 class="des"> with a short tagline or genre description.
The <button class="watchlist-btn" onclick="showFullscreenAlert()"> is already wired to the showFullscreenAlert() function in Hotstar.js. No additional JavaScript is needed — the alert modal will appear when the button is clicked on any card, new or existing. Recommended poster dimensions: Cards are 150 × 200px in CSS. Use portrait-orientation images at 150 × 200px or a matching 3:4 aspect ratio. The object-fit: cover on .card-img will crop wider images, centering them within the card frame. The four navigation links — TV, Movies, Sports, and Premium — are a <ul class="nav-links"> list in Hotstar.html: 
<ul class="nav-links">
    <li class="nav-items"><a href="#">TV</a></li>
    <li class="nav-items"><a href="#">Movies</a></li>
    <li class="nav-items"><a href="#">Sports</a></li>
    <li class="nav-items"><a href="#">Premium</a></li>
</ul>
Each link currently has href="#" as a placeholder. To wire a link to a real destination, replace # with an absolute URL or a relative path: 
<li class="nav-items"><a href="https://www.hotstar.com/in/tv">TV</a></li>
To add a new link, copy any <li class="nav-items">...</li> line and paste it inside the <ul class="nav-links">. Styling for additional items is inherited automatically from the .nav-items a rule in Hotstar.css.
Use consistent, hyphen-separated file names for all new images and videos you add. The existing project uses spaces in filenames (e.g., latest 1.png, slider 1.PNG), which works when files are opened directly in a browser but can cause 404 errors on some web servers and in certain deployment pipelines that encode spaces as %20. Prefer names like latest-11.png or slider-6.png for any new assets you add.

Build docs developers (and LLMs) love

Get started for freeTalk to us