Search code examples
jqueryhtmlvideocolorboxhref

Is it possible to replace a part of an <a> href values depending on the href value?

I'm trying to integrate Video JS and Colorbox. The goal is to use jQuery to simply change the value of all href that have ".mp4" in them and then change the ".mp4" to ".html". This will allow the existing code to work and the integration of two. By changing the ".mp4" to ".html" I can place the Video JS Player in the html pages and load the pages within Colorbox. Currently the video is just loaded into the Colorbox with out the Player. 

<a href="http://mysite/files/myvideo.mp4" class="cboxElement">Video</a>


$(document).ready(function(){

    $("a.cboxElement[href^='.mp4']")
   .each(function()
   { 
      this.href = this.href.replace(/^".mp4"/, 
         ".html");
   });


    $(".cboxElement").colorbox({iframe:true, innerWidth:640, innerHeight:370});
});
Solution

  • ^ is denoted as start with but in your case its not, its ended with .mp4 so you have to select with $ ends with attribute selector (might be said).

    try this: http://jsfiddle.net/QK9Ry/

    $("a.cboxElement[href$='.mp4']").each(function () {
   this.href = this.href.replace(".mp4",".html");
});