Code a tube website for me where people can watch ...

Question

Code a tube website for me where people can watch web series list some of the popular serious in it too and decide everything ur self

Answer 1

Below is one way to build a very simple “tube website” for streaming web series using only HTML, CSS, and JavaScript (with Bootstrap for styling). This example creates two pages:

Home Page (index.html): Shows a grid of popular web series (with sample placeholder images, titles, and descriptions) and “Watch Now” buttons.
Series Detail Page (series.html): Reads the series “slug” from the query string, displays a video player (using sample video URLs) and a list of episodes. Clicking an episode changes the video.

In a real production system you might use a back end with a database, proper user authentication, streaming infrastructure, and more robust design. But the following code is a self-contained starting point that you can run locally. (For testing, simply save the files and open index.html in your browser.)

File 1: index.html

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>TubeSeries - Watch Web Series Online</title>
  <!-- Bootstrap CSS (v4.5) -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <style>
    /* Custom styling */
    .card-img-top {
      height: 200px;
      object-fit: cover;
    }
  </style>
</head>
<body>
  <!-- Navigation -->
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="#">TubeSeries</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Popular</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Latest</a></li>
      </ul>
    </div>
  </nav>

  <!-- Main Content -->
  <div class="container mt-4">
    <h1 class="mb-4">Popular Web Series</h1>
    <div class="row">
      <!-- Series Card: Stranger Things -->
      <div class="col-md-4">
        <div class="card mb-4 shadow-sm">
          <img src="https://via.placeholder.com/350x200?text=Stranger+Things" class="card-img-top" alt="Stranger Things">
          <div class="card-body">
            <h5 class="card-title">Stranger Things</h5>
            <p class="card-text">A group of kids uncover supernatural mysteries in their small town.</p>
            <a href="series.html?series=stranger-things" class="btn btn-primary">Watch Now</a>
          </div>
        </div>
      </div>
      <!-- Series Card: Breaking Bad -->
      <div class="col-md-4">
        <div class="card mb-4 shadow-sm">
          <img src="https://via.placeholder.com/350x200?text=Breaking+Bad" class="card-img-top" alt="Breaking Bad">
          <div class="card-body">
            <h5 class="card-title">Breaking Bad</h5>
            <p class="card-text">A high school chemistry teacher turned methamphetamine producer.</p>
            <a href="series.html?series=breaking-bad" class="btn btn-primary">Watch Now</a>
          </div>
        </div>
      </div>
      <!-- Series Card: Money Heist -->
      <div class="col-md-4">
        <div class="card mb-4 shadow-sm">
          <img src="https://via.placeholder.com/350x200?text=Money+Heist" class="card-img-top" alt="Money Heist">
          <div class="card-body">
            <h5 class="card-title">Money Heist</h5>
            <p class="card-text">A criminal mastermind plans the biggest heist in history.</p>
            <a href="series.html?series=money-heist" class="btn btn-primary">Watch Now</a>
          </div>
        </div>
      </div>
      <!-- Series Card: Game of Thrones -->
      <div class="col-md-4">
        <div class="card mb-4 shadow-sm">
          <img src="https://via.placeholder.com/350x200?text=Game+of+Thrones" class="card-img-top" alt="Game of Thrones">
          <div class="card-body">
            <h5 class="card-title">Game of Thrones</h5>
            <p class="card-text">Noble families vie for control of the Iron Throne in a mythical land.</p>
            <a href="series.html?series=game-of-thrones" class="btn btn-primary">Watch Now</a>
          </div>
        </div>
      </div>
      <!-- Series Card: The Witcher -->
      <div class="col-md-4">
        <div class="card mb-4 shadow-sm">
          <img src="https://via.placeholder.com/350x200?text=The+Witcher" class="card-img-top" alt="The Witcher">
          <div class="card-body">
            <h5 class="card-title">The Witcher</h5>
            <p class="card-text">A monster hunter struggles to find his place in a turbulent world.</p>
            <a href="series.html?series=the-witcher" class="btn btn-primary">Watch Now</a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Footer -->
  <footer class="bg-dark text-white text-center py-3">
    &copy; 2025 TubeSeries. All rights reserved.
  </footer>

  <!-- Bootstrap and dependencies (jQuery and Popper.js) -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

File 2: series.html

This page reads the URL parameter (for example, ?series=breaking-bad), loads the corresponding data from a hard-coded JavaScript object, and displays a video player along with a list of episodes. When you click an episode, the video changes accordingly.

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Series Details - TubeSeries</title>
  <!-- Bootstrap CSS (v4.5) -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <style>
    /* Responsive video container */
    .video-container {
      position: relative;
      padding-bottom: 56.25%; /* 16:9 */
      padding-top: 25px;
      height: 0;
    }
    .video-container video {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>
  <!-- Navigation -->
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="index.html">TubeSeries</a>
  </nav>

  <!-- Main Content -->
  <div class="container mt-4" id="seriesContent">
    <!-- Content will be injected by JavaScript based on the series selected -->
  </div>

  <!-- Footer -->
  <footer class="bg-dark text-white text-center py-3 mt-4">
    &copy; 2025 TubeSeries. All rights reserved.
  </footer>

  <script>
    // Helper: Parse URL query string into an object.
    function getQueryParams() {
      var params = {};
      window.location.search.substr(1).split("&").forEach(function(item) {
        var pair = item.split("=");
        params[pair[0]] = decodeURIComponent(pair[1]);
      });
      return params;
    }

    // Sample series data.
    var seriesData = {
      "stranger-things": {
        title: "Stranger Things",
        description: "A group of kids uncover supernatural mysteries in their small town.",
        video: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
        episodes: [
          { title: "Episode 1: The Vanishing of Will Byers", video: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" },
          { title: "Episode 2: The Weirdo on Maple Street", video: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" }
        ]
      },
      "breaking-bad": {
        title: "Breaking Bad",
        description: "A high school chemistry teacher turned methamphetamine producer.",
        video: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4",
        episodes: [
          { title: "Episode 1: Pilot", video: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" },
          { title: "Episode 2: Cat's in the Bag...", video: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" }
        ]
      },
      "money-heist": {
        title: "Money Heist",
        description: "A criminal mastermind plans the biggest heist in history.",
        video: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/Sintel.mp4",
        episodes: [
          { title: "Episode 1: The Heist Begins", video: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/Sintel.mp4" },
          { title: "Episode 2: The Plan Unfolds", video: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/Sintel.mp4" }
        ]
      },
      "game-of-thrones": {
        title: "Game of Thrones",
        description: "Noble families vie for control of the Iron Throne in a mythical land.",
        video: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/TearsOfSteel.mp4",
        episodes: [
          { title: "Episode 1: Winter Is Coming", video: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/TearsOfSteel.mp4" },
          { title: "Episode 2: The Kingsroad", video: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/TearsOfSteel.mp4" }
        ]
      },
      "the-witcher": {
        title: "The Witcher",
        description: "A monster hunter struggles to find his place in a turbulent world.",
        video: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4",
        episodes: [
          { title: "Episode 1: The End's Beginning", video: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4" },
          { title: "Episode 2: Four Marks", video: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4" }
        ]
      }
    };

    // Get the series key from the URL, e.g., ?series=breaking-bad.
    var params = getQueryParams();
    var seriesKey = params.series;

    if (seriesData[seriesKey]) {
      var series = seriesData[seriesKey];
      var content = '<h1>' + series.title + '</h1>';
      content += '<p>' + series.description + '</p>';
      content += '<div class="video-container mb-4">';
      content += '<video controls><source src="' + series.video + '" type="video/mp4">Your browser does not support the video tag.</video>';
      content += '</div>';
      content += '<h3>Episodes</h3>';
      content += '<div class="list-group">';
      series.episodes.forEach(function(ep, index) {
        content += '<a href="#" class="list-group-item list-group-item-action" onclick="playEpisode(\'' + seriesKey + '\', ' + index + '); return false;">' + ep.title + '</a>';
      });
      content += '</div>';
      document.getElementById('seriesContent').innerHTML = content;
    } else {
      document.getElementById('seriesContent').innerHTML = '<p>Series not found. <a href="index.html">Go back to Home</a></p>';
    }

    // Function to change the video source when an episode is selected.
    function playEpisode(seriesKey, episodeIndex) {
      var series = seriesData[seriesKey];
      var episode = series.episodes[episodeIndex];
      var videoContainer = document.querySelector('.video-container');
      videoContainer.innerHTML = '<video controls autoplay><source src="' + episode.video + '" type="video/mp4">Your browser does not support the video tag.</video>';
    }
  </script>
</body>
</html>

How to Use This Code

File Structure:
Place both files (index.html and series.html) in the same folder.
Testing:
Open index.html in your browser. You’ll see a grid of popular web series. Clicking “Watch Now” on a card will load series.html with the appropriate query parameter. The series detail page displays a video player (using a sample video URL) and a list of episodes. Clicking an episode will update the video player.
Customization:
• Replace the placeholder images (currently provided by via.placeholder.com) with actual thumbnails.
• Update the video URLs with your own video sources or embeds.
• Expand the design and functionality (e.g., add user authentication, search functionality, or a database-backed back end) as needed.

This sample is meant to serve as a starting point for a “tube website” where people can browse and watch web series. Enjoy coding and feel free to extend the functionality as you see fit!

Code a tube website for me where people can watch ...

سؤال

الفكرة

الإجابة

File 1: index.html

File 2: series.html

How to Use This Code

مشاركة هذا السؤال والجواب