add popup to youtube section

index.html

@@ -387,13 +387,12 @@ class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 te
             <i data-feather="shopping-bag" class="w-5 h-5" aria-hidden="true"></i>
             <span>View VLC SWM on AppSource</span>
           </a>
-
-          <a href="https://www.youtube.com/watch?v=PfH2WFXYydI" rel="noopener" target="_blank"
+          <button onclick="document.querySelector('youtube-modal').open('PfH2WFXYydI')"
              class="cta-btn flex-1 inline-flex items-center justify-center gap-2 rounded-lg px-4 py-3 text-sm md:text-base font-semibold focus-ring">
             <i data-feather="play-circle" class="w-5 h-5" aria-hidden="true"></i>
             <span>Watch it in action</span>
-          </a>
-        </div>
+          </button>
+</div>
       </div>
     </section>
     <!-- Description Section -->
@@ -649,11 +648,13 @@ class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 te
       </div>
     </div>
   </footer>
-
-
+  <!-- YouTube Modal Component -->
+  <youtube-modal></youtube-modal>
+  
   <!-- Scripts -->
+ <script src="components/youtube-modal.js"></script>
  <script>
-  document.addEventListener('DOMContentLoaded', () => {
+document.addEventListener('DOMContentLoaded', () => {
     // --- Init AOS ---
     if (window.AOS) {
       AOS.init({