CODEWITHSUNDEEP
javascriptjoomla
v0idation
v0idation

Reputation: 55

How do I stop Joomla 5 messing with my Javascript?

I want to use the following Javascript to fetch a video URL. It works fine in a raw HTML page, but within an article in Joomla 5 the URL always has the local URL prepended.

<script>
  
  function loadVideo(videoUrl, videoTitle) {
    // Get the video-display div
    const videoDisplay = document.querySelector('.video-display'); 
    // Clear any previous content
    videoDisplay.innerHTML = ''; 

    const videoPlayer = `
      <h3>${videoTitle}</h3>
      <video width="100%" height="auto" controls autoplay>
        <source src="${videoUrl}" type="video/mp4">
      </video>
    `;
    
     // Inject the video player into the video-display div
    videoDisplay.innerHTML = videoPlayer;
  }
</script>

On inspecting the output HTML, the line <source src="${videoUrl}" type="video/mp4"> has been changed to <source src="/${videoUrl}" type="video/mp4"> which has the effect of prepending the local URL to the video URL. Can I stop this behaviour?

Thanks.

Upvotes: 0

Views: 26

Answers (1)

v0idation
v0idation

Reputation: 55

Well, I have a solution! Joomla rewrites the "src" tag, so I now set it dynamically as follows:

<script>
  
 function loadVideo(videoUrl, videoTitle) {
  const videoDisplay = document.querySelector('.video-display');
  videoDisplay.innerHTML = ''; 

  const videoPlayer = `
    <h3>${videoTitle}</h3>
    <video width="100%" height="auto" controls autoplay>
      <source data-src="${videoUrl}" type="video/mp4">
    </video>
  `;

  videoDisplay.innerHTML = videoPlayer; 

  // Set the actual src dynamically
  const sourceElement = videoDisplay.querySelector('source');
  sourceElement.setAttribute('src', sourceElement.getAttribute('data-src'));
}
</script>

Upvotes: 1

Related Questions