Utk yg mo Bantu2 Keuangan saya..monggo ke Bank Central Asia BCA 5520166779 a.n. Andreas Tparlaungan Manurung (Indonesia) For those who would like to help support my finances ..please feel free to send it to Bank Central Asia (BCA) account number 5520166779 under the name Andreas Tparlaungan Manurung (Indonesia)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>YouTube Video Embed Without Iframe Showcase</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      background-color: #0f172a;
      color: #f8fafc;
      padding: 40px 20px;
      line-height: 1.6;
    }

    .container {
      max-width: 800px;
      margin: 0 auto;
    }

    h1 {
      text-align: center;
      margin-bottom: 10px;
      color: #38bdf8;
    }

    p.subtitle {
      text-align: center;
      color: #94a3b8;
      margin-bottom: 40px;
    }

    .card {
      background-color: #1e293b;
      border: 1px solid #334155;
      border-radius: 12px;
      padding: 24px;
      margin-bottom: 32px;
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
    }

    .card h2 {
      font-size: 1.25rem;
      margin-bottom: 8px;
      color: #f1f5f9;
    }

    .card p.desc {
      font-size: 0.9rem;
      color: #94a3b8;
      margin-bottom: 16px;
    }

    /* Aspect Ratio Wrapper (16:9) */
    .video-wrapper {
      position: relative;
      width: 100%;
      padding-bottom: 56.25%; /* 16:9 aspect ratio */
      overflow: hidden;
      background-color: #000;
      border-radius: 8px;
    }

    .video-wrapper img,
    .video-wrapper iframe,
    .video-wrapper video {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: 0;
      object-fit: cover;
    }

    /* Custom Play Button Overlay */
    .play-button {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 68px;
      height: 48px;
      background-color: rgba(255, 0, 0, 0.9);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.2s ease, background-color 0.2s ease;
      z-index: 2;
    }

    .play-button::after {
      content: '';
      width: 0;
      height: 0;
      border-top: 10px solid transparent;
      border-bottom: 10px solid transparent;
      border-left: 18px solid #ffffff;
      margin-left: 3px;
    }

    .video-wrapper:hover .play-button {
      transform: translate(-50%, -50%) scale(1.1);
      background-color: #ff0000;
    }

    /* Option 1 Link Styling */
    .thumbnail-link {
      display: block;
      cursor: pointer;
    }

    /* Option 2 Clickable Wrapper */
    .lazy-player {
      cursor: pointer;
    }
  </style>
</head>
<body>

  <div class="container">
    <h1>Embedded Video Alternatives</h1>
    <p class="subtitle">3 ways to embed videos without loading an initial <code>&lt;iframe&gt;</code></p>

    <!-- OPTION 1: External Link Card -->
    <div class="card">
      <h2>Option 1: Lightweight Thumbnail Link</h2>
      <p class="desc">Displays the video thumbnail with a play overlay. Clicking opens YouTube directly in a new tab without any iframe overhead on your page.</p>
      
      <div class="video-wrapper">
        <a href="https://www.youtube.com/watch?v=TqhNwEtZVcw" target="_blank" rel="noopener noreferrer" class="thumbnail-link" aria-label="Watch on YouTube">
          <img src="https://img.youtube.com/vi/TqhNwEtZVcw/hqdefault.jpg" alt="YouTube Thumbnail">
          <div class="play-button"></div>
        </a>
      </div>
    </div>

    <!-- OPTION 2: Lazy Loading JS Player -->
    <div class="card">
      <h2>Option 2: On-Demand Dynamic Player (Lazy Loading)</h2>
      <p class="desc">Loads as a fast image thumbnail. An iframe is created dynamically only when the user clicks Play, saving page load performance and tracking scripts.</p>
      
      <div class="video-wrapper lazy-player" id="lazy-yt-player" onclick="loadYouTubeVideo()">
        <img src="https://img.youtube.com/vi/TqhNwEtZVcw/hqdefault.jpg" alt="YouTube Thumbnail">
        <div class="play-button"></div>
      </div>
    </div>

    <!-- OPTION 3: HTML5 Native Video Tag -->
    <div class="card">
      <h2>Option 3: Standard HTML5 Video Tag</h2>
      <p class="desc">Uses browser-native playback for self-hosted or directly hosted MP4 video files instead of relying on third-party iframe embeds.</p>
      
      <div class="video-wrapper">
        <video controls poster="https://img.youtube.com/vi/TqhNwEtZVcw/hqdefault.jpg">
          <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
          Your browser does not support the video tag.
        </video>
      </div>
    </div>
  </div>

  <script>
    // Option 2: Function to swap the image thumbnail with the YouTube iframe on click
    function loadYouTubeVideo() {
      const container = document.getElementById('lazy-yt-player');
      container.innerHTML = `
        <iframe 
          src="https://www.youtube.com/embed/TqhNwEtZVcw?autoplay=1" 
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
          allowfullscreen>
        </iframe>
      `;
    }
  </script>

</body>
</html>