Change Screen Videos

0

Good People 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 loading a list of videos from the database, which has the title of the video, and the link of the video, 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 question is, how do I change the IFRAME video when the button is clicked? with javascript or jquery

    
asked by anonymous 24.08.2017 / 22:09

2 answers

1

In this case, just do a function that changes the src attribute of the iframe, eg

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>
    
24.08.2017 / 22:18
1
Make the buttons change the 'src' attribute of the iframe, see (note that I've set an iframe id):

Jquery:

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

Javascript:

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

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

<a href="#">

After doing so assign the code I gave you to a function, to avoid duplicate code.

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

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

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

Ending this way:

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

It should solve your problem ...

    
24.08.2017 / 22:15