how to show the product video here of my product video

[Ecomsmartify]

I have added view product video through code but my video is not showing in the popup modal eventhough my product have a video is anyone can help me to fix this issue thanks in advance
store url: https://store1.ecomsmartify.shop/products/zoha
password: 4

 codes 

{%- assign product_video = product.media | where: 'media_type', 'video' | first -%}
{%- if product_video -%}
  <div class="product__video-button">
    <a href="javascript&colon;void(0);" class="btn btn--video" id="play-video-btn">
      <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" id="video" width="512" height="512" viewBox="0 0 512 512">
        <path d="M303.7 128h-221C63.9 128 47 142.1 47 160.7v187.9c0 18.6 16.9 35.4 35.7 35.4h221c18.8 0 33.3-16.8 33.3-35.4V160.7c0-18.6-14.5-32.7-33.3-32.7zM320 348.6c0 9.3-6.9 18.4-16.3 18.4h-221c-9.4 0-18.7-9.1-18.7-18.4V160.7c0-9.3 9-15.5 18.4-15.5l221 .1c9.4 0 16.6 6.1 16.6 15.4v187.9zM367 213v85.6l98 53.4V160l-98 53zm81-23v132.3l-64-33.5v-65.6l64.1-33.6-.1.4z"></path>
      </svg>
      View Product Video
    </a>
  </div>
{%- endif -%}

<script>
document.getElementById("play-video-btn").addEventListener("click", function(event) {
  event.preventDefault();  // Prevent default link behavior
  
  // Ensure the video URL is pulled dynamically from the Liquid variable
  var videoUrl = "{{ product_video | media_tag: 'video' }}";  // Use media_tag to get the correct video URL
  
  // Check if the video URL exists
  if (!videoUrl) {
    alert("Video not available.");
    return;
  }

  // Create the modal HTML structure
  var videoModal = document.createElement("div");
  videoModal.className = "video-modal";
  videoModal.innerHTML = `
    <div class="video-modal-content">
      <button class="close-btn">&times;</button>
      <video controls autoplay>
        <source src="${videoUrl}" type="video/mp4">
        Your browser does not support the video tag.
      </video>
    </div>
  `;
  
  // Append modal to body
  document.body.appendChild(videoModal);

  // Close the modal
  document.querySelector(".close-btn").addEventListener("click", function() {
    videoModal.remove();
  });
});
</script>

[FarioConsulting]

Hi,
Could you check whether the "product_video | media_tag: 'video'" is actually pulling in the correct video URL from your product data.
Also, make sure that your JavaScript logic for appending the modal to the body is working properly....ensure that when you click the button, it's creating a modal with the right attributes and displaying it correctly.

If you've checked all these parts and still no luck, maybe try adding some console logs in your script to see if the video URL is being fetched at all or if there are any other hiccups along the way.

Hope that helps!

[Ecomsmartify]

Hi can you help me out I'm stuck on this please this is built on dawn theme