deep link video url on a webpage

Question

I have a video's page which have local hosted videos on and 3 thumbnails and when clicked, they load into a main video div - this works and is great. Only issue i have is when you load video 1, 2 or 3 they url at the top stays the same. Is there a way of deeplinking so the url changes to website url/#video-1 and so on? Had a research and from what i have currently built not sure how to integrate it into it. Any links/tutorials would be great

Here is what i have so far:

JS:

    //video gallery
     $(".thumbnail-1,.thumbnail-2,.thumbnail-3").on("click", function(event) {
      event.preventDefault();
      $(".main_stage iframe").prop("src", $(event.currentTarget).attr("href"));
      loadURL($(this).attr('href'));
    });
});

Answer 1

It could be something like this:

$(window).load(function() {
    // get hash string eg. #video1
    var hash = window.location.hash;

    if (hash == '#video-1') { // do some checks, you can apply regex or switch
        // I'm not sure what your html looks like
        $(".main_stage iframe").prop("src", $('selector').attr("href"));
        loadURL($(this).attr('href'));
    }
});

$(".thumbnail-1,.thumbnail-2,.thumbnail-3").on("click", function(event) {
    var className = $(this).attr("class"); // get class name of clicked element
    var videoId = className.split("-").pop(); // split string to get video id => "1, 2, 3 etc."

    window.location.hash = '#video' + videoId; // change url to eg. #video1
    event.preventDefault();
    $(".main_stage iframe").prop("src", $(event.currentTarget).attr("href"));
    loadURL($(this).attr('href'));
});

If you would do validation based on Regex (fiddle here) you can use this code:

var hash = window.location.hash;
var regex = new RegExp('^#video-[0-9]{1,10}$');

if (regex.test(hash)) {
   // if hash is something like "#video-[NUMBERS]" then do something
}