Solution 1 :

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

Solution 2 :

Well i think you got a typo there

buttonLink !== buttonlink

Remember javascript is case sensitive.

Solution 3 :

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

Problem :

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?


<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>


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

function changevid(buttonLink) {

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




Comment posted by Alex W

ah thank you for spotting this, it works now! not sure how i missed this

Comment posted by xiscodev

Great it helps, you can integrate linters to your code editor to help you find syntax mistakes.