Change video source by clicking a link (JQuery)

Question

Basically I have a webpage which uses a video as a background. When the user clicks a link (not a button) the video needs to change to a different video and play. I need to do this throughout the site as it is an animated narrative story.

My code I've been working with:

HTML:

<div id="slide1">
    <p>Here is the first trigger. It should look something like this</p>
    <p></p>
    <a href="#" id="slide1to2">Next</a>
    </div>

    <div id="slide2" style="display: none;">Here is the second one</div>


</div>


<video id="video_background" preload="auto" autoplay loop> <source src="assets/video/street1.mp4" type="video/mp4" id="vidya">
</video>

Jquery:

 $(function(){
    $('#slide1to2').click(function() {
      var src = "assets/video/street1.mp4";
       $("#video_background").find("#vidya").attr("src", assets/video/street2.mp4);
    });
});

Can't figure it out

Answer 1

Forgot to quote the string:

attr("src", "assets/video/street2.mp4");

Also, you're running .find and looking for an element with an ID...just use the ID and change the attribute.

$("#vidya").attr("src", "assets/video/street2.mp4");

Answer 2

You need to wrap the value of src inside quotes ' ' or double quotes " "

$("#vidya").attr("src", "assets/video/street2.mp4");

but since you've already assigned the value to src variable, then you can use:

$("#vidya").attr("src",src);

Please note that id must be unique so you can just use $("#vidya") instead of applying redundant .find() method here.