You need to be careful about spelling/case-sensitivity. You have passed in buttonLink (with a capital L) and you are assigning that value to the src, but spelt with a lowercase l. These things do make a difference! (The same error has been made with vid1.mp4/Vid1.mp4)

Here is a working fiddle (linked to a video on my website – only the first video works). If you click Video 1 button, you will see the video update. However, if you change the uppercase to lowercase in the buttonLink, you will see that the code won’t work.

Hope this helps

Well i think you got a typo there

buttonLink !== buttonlink

Remember javascript is case sensitive.

You are doing everything correctly expect you are not loading the video.
In function do something like

function changevid(buttonLink) {
video = document.getElementById('change');
video.src = buttonLink;
video.load(); //this line is imported to let browsesr fetch new video
}

Read the official w3 documentation with example on
https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/load

i’m trying to change the video source at the click of a button. The aim is that the user can click the button (ie video title) and the video they want will appear. I’m struggling to get this code to work. Vid 1 appears but non of the buttons are functioning.

Does any one have any thought as to where i’m going wrong?
thanks

html

<button onClick="changevid('videos/vid1.mp4')">Video 1</button>
<button onClick="changevid('videos/vid2.mp4')">Video 2</button>
<button onClick="changevid('videos/vid3.mp4')">Video 3</button>

<video controls id="change">
  <source src="videos/Vid1.mp4" type="video/mp4"></source>
</video>

JS

<script language="javascript" type="text/javascript"> 

function changevid(buttonLink) {

document.getElementById('change').src = buttonlink;

}

</script>