비디오 플레이어 구성 요소 - 수채화/예술, 바다/블루, 헬스케어

<div class="relative bg-gradient-to-br from-blue-50 to-blue-200 dark:from-blue-950 dark:to-blue-800 p-4 sm:p-6 md:p-8 rounded-xl shadow-xl overflow-hidden group">
  <!-- Watercolor overlay effect -->
  <div class="absolute inset-0 z-0 opacity-40 mix-blend-multiply dark:mix-blend-screen" style="background-image: url('data:image/svg+xml;utf8,<svg width=\'100%\' height=\'100%\' viewBox=\'0 0 100 100\' xmlns=\'http://www.w3.org/2000/svg\'><defs><filter id=\'watercolorEffect\'><feTurbulence type=\'fractalNoise\' baseFrequency=\'0.02 0.05\' numOctaves=\'2\' result=\'noise\'/><feDiffuseLighting in=\'noise\' lightingColor=\'#ADD8E6\' surfaceScale=\'3\' result=\'light\'/><feBlend in=\'SourceGraphic\' in2=\'light\' mode=\'multiply\'/></filter></defs><rect x=\'0\' y=\'0\' width=\'100\' height=\'100\' fill=\'url(%23gradient)\'/><radialGradient id=\'gradient\' cx=\'50%\' cy=\'50%\' r=\'50%\' fx=\'50%\' fy=\'50%\'><stop offset=\'0%\' stop-color=\'rgb(173,216,230)\'/><stop offset=\'100%\' stop-color=\'rgb(135,206,235)\'/></radialGradient><rect x=\'0\' y=\'0\' width=\'100\' height=\'100\' filter=\'url(%23watercolorEffect)\' opacity=\'0.5\'/></svg>'); background-size: cover;"></div>

  <div class="relative z-10 flex flex-col lg:flex-row items-center lg:items-start space-y-6 lg:space-y-0 lg:space-x-8">

    <!-- Video Player Area -->
    <div class="w-full lg:w-2/3 aspect-video bg-blue-300 dark:bg-blue-900 rounded-lg shadow-inner-lg overflow-hidden border border-blue-400 dark:border-blue-700 group-hover:scale-[1.01] transition-transform duration-300 ease-out">
      <iframe
        class="w-full h-full"
        src="https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=0&controls=1&showinfo=0&rel=0&modestbranding=1"
        title="Medical Procedure Video"
        frameborder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
        allowfullscreen
      ></iframe>
    </div>

    <!-- Video Info / Description -->
    <div class="w-full lg:w-1/3 flex flex-col space-y-4 text-center lg:text-left">
      <h3 class="text-2xl sm:text-3xl font-extrabold text-blue-800 dark:text-blue-100 leading-tight tracking-tight drop-shadow-sm font-serif">
        <span class="block">Understanding</span>
        <span class="block">Respiratory Health</span>
      </h3>
      <p class="text-blue-700 dark:text-blue-200 text-base sm:text-lg leading-relaxed font-light">
        This insightful video provides a comprehensive overview of common respiratory conditions and preventative measures. Essential viewing for patients and caregivers.
      </p>
      <div class="flex justify-center lg:justify-start items-center space-x-3 pt-2">
        <img src="https://randomuser.me/api/portraits/men/44.jpg" alt="Dr. Alex Chen" class="w-10 h-10 rounded-full border-2 border-blue-500 dark:border-blue-400 shadow-md">
        <span class="text-blue-600 dark:text-blue-300 text-sm font-medium">Dr. Alex Chen, MD</span>
      </div>
      <div class="flex justify-center lg:justify-start pt-4">
        <button class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-lg text-white 
              bg-gradient-to-r from-sky-500 to-blue-600 hover:from-sky-600 hover:to-blue-700 
              dark:from-sky-700 dark:to-blue-800 dark:hover:from-sky-800 dark:hover:to-blue-900
              focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-blue-950 transform hover:scale-105 transition-all duration-200 ease-in-out group">
          <svg class="-ml-1 mr-3 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M2 10a8 8 0 1116 0 8 8 0 01-16 0zm8-7a1 1 0 00-.707-.293L4.293 8.293a1 1 0 000 1.414l5 5a1 1 0 001.414 0l5-5a1 1 0 000-1.414L10.707 2.707A1 1 0 0010 3z" clip-rule="evenodd" />
            <path fill-rule="evenodd" d="M10 8V5a1 1 0 00-1-1H7a1 1 0 000 2h1v3a1 1 0 00-1 1H7a1 1 0 000 2h1v3a1 1 0 001 1h2a1 1 0 001-1v-3h1a1 1 0 000-2h-1V9h1a1 1 0 000-2h-1V5h1a1 1 0 000-2h-1z" clip-rule="evenodd" />
            <path d="M8.707 13.293a1 1 0 00-1.414 0L4.293 15.586a1 1 0 000 1.414l3 3a1 1 0 001.414-1.414L6.414 16H13a1 1 0 000-2H6.414l2.293-2.293a1 1 0 000-1.414z" />
          </svg>
          Watch Now
        </button>
      </div>
    </div>
  </div>

  <!-- Subtle brush stroke footer -->
  <div class="absolute bottom-0 left-0 right-0 h-6 bg-blue-300 dark:bg-blue-800 opacity-60 rounded-b-xl" style="mask-image: url('data:image/svg;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjUwIiB2aWV3Qm94PSIwIDAgMjAwIDUwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3My5vcmcvMjAwMC9zdmciPjxlbGxpcHNlIGN4PSIxMDQuNzcxIiBjeT0iMS41MDc2MSIgcnk9IjQ5LjUwNzYxIiByeD0iMTU5Ljc3MSIgc2tldyYobGRxdW87eClyZWNlbnQ9IjAuNjY5MTgzIiByb3RhdGU9Ii02LjM1MjY1IiBmaWxsPSIjRjk2RkYwIi8+PC9zdmc+'); mask-size: cover; mask-repeat: no-repeat; mask-position: bottom;"></div>
</div>