Best way to change the source of a video player

JavaScript
1

Is there a way to change the source of a video element by the user? Like using a button?

Ive been trying javascript using

var newSource = ‘https://youtu.be/NEW_VIDEO_ID’;
video.src = newSource;

But it doesnt change? Any ideas or examples?

2

Hi,

I guess we are talking about embedded YouTube videos here?

How are you including the video on your page? It would be helpful if you could post the code you have so far.

Also, when you post code, please mark it up as code by selecting it with your mouse, then hitting the button in the editor that looks like this </>

1 Like
3

Hi

I’m trying to dynamically change the source of a video with a button click. I have several videos to display and would love to be able the user to change them when needed.

I have tried it with a normal button and a code element.

I have added code:

<script>
"function changeVideoSource() {
  // JavaScript code to change the video source
  // For example:
  
  var video = document.getElementById('block-yui_3_17_2_1_1709155643233_4986');
  video.src = 'https://youtu.be/7m94ip38UKs?si=YEmrvTrkIkR6Zqgw';
 console.log('Video source changed Successfully:', video.src); 

  alert('Video source changed successfully!'); 
}

</script>

Change Video Source"

“Video source changed. Successfully: https://youtu.be/7m94ip38UKs?si=YEmrvTrkIkR6Zqgw”

But the source doesnt change.

Can you see any thing I’m doing wrong or is there a better way to do this?

4

Embedded or from a squarespace gallery. Which ever works.

Thank you for the tips

<script>
function changeVideoSource() {
  
  var video = document.getElementById('block-yui_3_17_2_1_1709155643233_4986');
  video.src = 'https://youtu.be/7m94ip38UKs?si=YEmrvTrkIkR6Zqgw';
 console.log('Video source changed Successfully:', video.src); 

  alert('Video source changed successfully!'); 
}

</script>

<button onclick="changeVideoSource()">Change Video Source</button>
5

In an iframe?

It would help if you could post the code for a bare-bones demo, that I could run it on my PC and at least see one video playing.

6

I’m using squarespace so using injected code. Very limiting

the website is www.ocandc.com.au/self-care

I’m an old ex programmer so Ive forgotten a lot.

The video is a block tool that you drop into the page

7

I’m starting to think maybe the video is the problem.

8

It is the squarespace video player!!!

9

Yeah, the squarespace video player is a whole tangle of markup, styles and JavaScript and just swapping out the src on the video won’t work.

A better approach might be to select the parent container, remove all of its children, then embed the YouTube video within the empty parent.

I have a feeling though, that whatever you do, you will be fighting Squarespace all the way.

It might be better to look at a different solution, such as a video carousel.

10

Thank you