How to change url on click without refreshing the page?

Question

I have designed a page containing my youtube videos. When you click on the title, embedded videos change on the right division. But the problem is url, I want users to share the video they want. If they press back button they can go back to previous video. I know we can have all these by html 5 history api, but I am new to this and after all my efforts I am not able to solve these problems. Please help.

Following is the code:

Youtube Videos Page

<style type="text/css">

    body{
        margin: 0px;
    }

    #leftdiv{
        background-color: #A9F5D0;
        float: left;
        height:100%;
        width: 30%;

    }

    #rightdiv{
        background-color: #F8E0F1;
        float: left;
        height: 100%;
        width: 70%;
    }

    #lectname{
        padding:10px;
        font-family: "comic sans ms";
    }


</style>

<div id="container">

    <div id="leftdiv">

        <div id="lectname">
            <p id="lectname1">Lec 01: What is Signal?</p>
            <p id="lectname2">Lec 02: What is an Analog Signal?</p>
            <p id="lectname3">Lec 03: What is Digital Signal?</p>
            <p id="lectname4">Lec 04: Need of Digital Signal</p>
            <p id="lectname5">Lec 05: Introduction to Digital Electronics</p>
            <p id="lectname6">Lec 06: Switch and Bits Intuition</p>
        </div>          

    </div>

    <div id="rightdiv">
        <iframe width="480" height="270" src="https://www.youtube.com/embed/M0mx8S05v60" frameborder="0" allowfullscreen></iframe>
    </div>  

</div>

<script type="text/javascript">

    var lectureVideos = {
    lectname1: "https://www.youtube.com/embed/M0mx8S05v60",
    lectname2: "https://www.youtube.com/embed/F5h3z8p9dPg",
    lectname3: "https://www.youtube.com/embed/jRL9ag3riJY",
    lectname4: "https://www.youtube.com/embed/izBaDRyqnBk",
    lectname5: "https://www.youtube.com/embed/2xXErGeeb_Q",
    lectname6: "https://www.youtube.com/embed/RF9I6UzI4Rc"
}

var videoLinks = document.getElementsByClassName("videoLink");
for(var i=0; i<videoLinks.length; i++){
    videoLinks[i].onclick=function(){
        document.getElementById("videoFrame").src=lectureVideos[this.id];
    }
}
</script>

Do you want the URL in the browser to be the URL of the actual youtube video, but don't want the page displayed to actually be that? Or you want the URL to be something like: "mysite.com/lecture2" which shows the video in your page? — Adam J.R. Erickson
– Adam J.R. Erickson, Commented Dec 11, 2015 at 20:20
@AdamJ.R.Erickson I don't want it to be url of youtube. I want it like: "mysite.com/lecture2" — Sujeet Singh
– Sujeet Singh, Commented Dec 11, 2015 at 21:00
The ususal way to do that is by using a framework (angular, ember, etc) and defining routes. That's a big leap, though, in your case if you haven't done it before. I haven't used this, but you might try a library like this: stoodder.github.io/finchjs — Adam J.R. Erickson
– Adam J.R. Erickson, Commented Dec 11, 2015 at 21:20

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

You're correct that you should be using history API. Reading the docs here will help.

The basic idea is when one of your links is clicked, you should only call history.popState.

Then you setup a window.onpopstate function to handle the video change. This way, no matter if a user clicks the link, back, or forward button, the video change function will be called.

Here is demo code (although the url change doesn't work properly in jsfiddle because its in an iframe)

And here is a working example.

// when a video link is clicked, change the URL
var onVideoLinkClick = function(e){

    // did we click on a link with class "video"?
    if( e.target.tagName == 'A' && e.target.classList.contains('video')){
        
    var videoID = e.target.getAttribute('href');
    
    // change the url
    history.pushState(
        {videoID: videoID}, // data
      e.target.innerText,   // title
      'video-'+videoID      // url path
    )
    
    changeVideo(videoID)
    
    e.preventDefault();
  }

}

// change the playing video to a new video ID
var changeVideo = function(videoID){
    var src = 'https://www.youtube.com/embed/'+videoID;
    document.getElementById("videoFrame").src = src;
}

// triggered when clicking on a video using the back/forward browser button 
var onUrlChange = function(e){
  changeVideo(e.state.videoID)
}

// bind the event listners
window.addEventListener('click', onVideoLinkClick);
window.onpopstate = onUrlChange;

With the following HTML

<div id="container">

    <div id="leftdiv">

        <div id="lectname">
            <p><a class="video" href="M0mx8S05v60">Lec 01: What is Signal?</a></p>
            <p><a class="video" href="F5h3z8p9dPg">Lec 02: What is an Analog Signal?</a></p>
            <p><a class="video" href="jRL9ag3riJY">Lec 03: What is Digital Signal?</a></p>
            <p><a class="video" href="izBaDRyqnBk">Lec 04: Need of Digital Signal</a></p>
            <p><a class="video" href="2xXErGeeb_Q">Lec 05: Introduction to Digital Electronics</a></p>
            <p><a class="video" href="RF9I6UzI4Rc">Lec 06: Switch and Bits Intuition</a></p>
        </div>          

    </div>

    <div id="rightdiv">
        <iframe id="videoFrame" width="480" height="270" frameborder="0" allowfullscreen></iframe>
    </div>  

</div>

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Dec 11, 2015 at 22:28

Kevin Jantzer

9,5112 gold badges31 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Sujeet Singh Over a year ago

This is exactly what I needed. I have one problem though, its working fine in your example but when I tried to implement it on my local machine its not working. Please tell me what I am doing wrong.

Sujeet Singh Over a year ago

It was not working on local machine when I put it on server its working fine. Thank you for your help.

Sujeet Singh Over a year ago

When I copy the changed url and try to open it in new tab, there is 404 error-"The requested URL /electronics/digital-electronics/video-F5h3z8p9dPg was not found on this server."

Kevin Jantzer Over a year ago

Yes, you'll need to config your apache server to redirect all unknown urls to the root. You do this by modifying your .htaccess file

Kevin Jantzer Over a year ago

Or if you dont want to do that, you could use location.hash and window.onhashchange instead of the modern history API which would make your URL like this: /electronics/digital-electronics#video-F5h3z8p9dPg

Collectives™ on Stack Overflow

How to change url on click without refreshing the page?

1 Answer 1

Here is demo code (although the url change doesn't work properly in jsfiddle because its in an iframe)

And here is a working example.

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Here is demo code (although the url change doesn't work properly in jsfiddle because its in an iframe)

And here is a working example.

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related