Show a different video by clicking with javascript on a link generated by php

Question

Show a different video by clicking with javascript on a link generated by php

Navigation

#1 by (2 votes)

3

This is a piece of a website I'm doing. This table shows a series of gym exercises and, in each of the rows of the table, in addition to the basic attributes there is a link to a video that is displayed when you click on the video glyphicon.

The problem is that I do not know how to do so that the video that is shown is in particular the one of the tunnel in which I am clicking. I do not know how to send the iframe the link to insert into the data src as one clicks or the other, as it always shows the same video.

I leave an image of the specific page in case it helps:

<script>
function postYourAdd () 
{
    var iframe = $("#forPostyouradd");
    iframe.attr("src", iframe.data("src")); 
}
</script>

<table class="default">
<!-- Listar Ejercicios -->
<?php 
foreach ($arrayEjercicio as $ejer)  
{
?>

    <tr>                                                        
        <td width='15%'> <?php echo $ejer['nombreejercicio'] ?> </td>
        <td width='15%'> <?php echo $ejer['tipoejercicio'] ?> </td>
        <td width='15%'> <?php echo $ejer['niveldificultad'] ?> </td>
        <td width='10%'><div id="<?php echo $ejer['video']?>
            "onclick="postYourAdd()"  class='glyphicon glyphicon-play-circle'></td>
        <td width='12%'><a class="icon-edit" href="e_detalles_ejer.php?ejer=
            <?php echo $ejer['idejercicio']?>"> <div class='glyphicon glyphicon-edit'>
            </div></a></td>
        <td width='12%'><a class="icon-trash" href="e_del_ejer.php?ejer=
            <?php echo $ejer['idejercicio']?>"> <div class='glyphicon glyphicon-trash'>
            </div></a></td>
    </tr>

<?php
}
?>
</table>
<table class='alternative'>
    <tr>
        <td width='25%'></td>
        <td width='15%' colspan='4'><div class='button'><a href="e_nuevo_ejer.php"
            class="boton"><?php echo $idioma['nuevo_ejer'];?></a></div></td>
        <td width='25%'></td>
    </tr>
</table>
<table class='alternative'>
<tr>
    <td width='33%'></td>
    <td widht='60%'><iframe id="<?php echo $ejer['video']?>" data-src="
    <?php echo $ejer['video']?>" src="about:blank" width="420" height="315" 
        style="background:#E0F0F0"></iframe></td>    
    <td width='25%'></td>
</tr>
</table>

javascript

asked by Edgard 15.01.2017 в 08:35

source

1 answer

Nested accordions on Bootstrap Error creating a new related record

score 2 · Answer 1

You could make the following modifications.

In the script that the video shows, you could receive by parameter the URL of the video, like this:
```
function postYourAdd (video) {
  $("#forPostyouradd").attr("src", video); 
}
```

In the glyphicon video you should pass the URL to the video directly to the function, like this:

<div onclick="postYourAdd('<?php echo $ejer['video']?>')" 
  class="glyphicon glyphicon-play-circle"></div>

And finally your iframe should have the id="forPostyouradd" , like this:

<iframe id="forPostyouradd" src="about:blank" width="420" height="315" 
style="background:#E0F0F0"></iframe>