Change Videos from Canvas

Question

Good Folks I have a screen that incorporates Youtube videos

<div class="row centro-video">
  <iframe width="853" height="480"  class="fundo-video" id="video-curso1" src="https://www.youtube.com/embed/kRUyL6cJ7W4?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>

I’m uploading a list of videos from the database, which has the video title, and the video link, I’m creating a button for each video.

<?php
  foreach ($listaVideo as $videoobj) {
?>
  <a href="<?php echo $videoobj->getLink()?>" data-dismiss="modal" class="btn btn-block btn-primary texto-grande" type="button"> <?php echo $videoobj->getTitulo()?></a>
<?php
  }
?>

The doubt is the following, how do I change the IFRAME video when the button is clicked ? with javascript or jquery

Answer 1

Make the buttons change the src attribute of the iframe, see (note that I have set an id to the iframe):

Jquery:

$("#idiframe").attr("src", "linkvideo");

Javascript:

document.getElementById('idiframe').src ='linkvideo';

@Edit: To get what you want, replace the href attribute of the link to '#' thus

<a href="#">

After doing this assign the code that I passed you to a function, to avoid repeating code.

function mudarVideo(url){
    document.getElementById('idiframe').src = url;
}

In the buttons being created by the for loop, add the following attribute:

onclick="mudarVideo('<?php echo $videoobj->getLink();?>');?>"

Getting at the end like this:

<?php
    foreach ($listaVideo as $videoobj) {
?>
    <a href="#" onclick="mudarVideo('<?php echo $videoobj->getLink();?>');?>"  data-dismiss="modal" class="btn btn-block btn-primary texto-grande" type="button"> <?php echo $videoobj->getTitulo()?></a>
<?php
    }
?>

Should solve your problem...

Answer 2

In this case, just make a function that changes the attribute src iframe, example:

function changeVideo($a) {
  document.getElementById('video-curso1').src = $a.href;
  return false;
}

<a href="https://www.youtube.com/embed/kRUyL6cJ7W4?rel=0&amp;showinfo=0" onclick="return changeVideo(this)">Video 1</a>
<a href="https://www.youtube.com/embed/cHupkv2cEhs?rel=0&amp;showinfo=0" onclick="return changeVideo(this)">Video 2</a>
<div class="row centro-video">
  <iframe width="853" height="480" class="fundo-video" id="video-curso1" src="https://www.youtube.com/embed/kRUyL6cJ7W4?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>