<section
  class="py-16 bg-[#FEFDFB]"
  data-component-type="Content"
>

  <div class="mx-auto px-4">

    <div
      id="videoBox"
      class="relative aspect-video max-w-[90%] mx-auto rounded-lg overflow-hidden shadow-lg cursor-pointer"
    >

      <!-- POSTER IMAGE -->
      <img
        data-node="video_poster_image"
        data-node-type="file"
        data-node-label="Video Poster Image"
        data-node-default="../assets/vedio_player/image.png"
        src="{{video_poster_image}}"
        class="w-full h-full object-cover"
        alt="Video Poster"
      />

      <!-- PLAY BUTTON OVERLAY -->
      <div class="absolute inset-0 flex items-center justify-center bg-black/40">

        <img
          data-node="video_play_icon"
          data-node-type="file"
          data-node-label="Play Button Icon"
          data-node-default="../assets/vedio_player/playButton.png"
          src="{{video_play_icon}}"
          class="lg:w-[80px] md:w-[60px] w-[40px] h-auto"
          alt="Play Button"
        />

      </div>

    </div>

  </div>

</section>



 <script>
      document
        .getElementById("videoBox")
        .addEventListener("click", function () {
          this.innerHTML = `
    <iframe 
      class="w-full h-full"
      src="https://www.youtube.com/embed/qgwHxIXuyvQ?autoplay=1"
      frameborder="0"
      allow="autoplay; encrypted-media"
      allowfullscreen>
    </iframe>`;
        });
    </script>