Foreach video create modal - php

Question

I'm trying to loop through an array of videos and create a button/modal combo for each. I'm having an issue with the need for id="myModal". Each video's button links to the same video. How would I go about keeping these unique? I've tried changing id to class, but that wasn't working.
<?php foreach ($thisVideos as $video):?>
<button class="btn btn-primary link">Video</button>
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<iframe width="400" height="300" frameborder="0" allowfullscreen=""></iframe>
</div>
</div>
</div>
</div>
<script>
$('.link').click(function () {
var src = 'http://www.youtube.com/v/<?=$video["entry_data"]["video-id"]?>';
$('#myModal').modal('show');
$('#myModal iframe').attr('src', src);
});
$('#myModal button').click(function () {
$('#myModal iframe').removeAttr('src');
});
</script>
<?php endforeach; ?>

Answer 1

Your approach is wrong, you only need one modal element and one script (and one event handler...) so you put these outside of the loop. You can add the url in a data attribute in your video list and then you can do everything you need to do.
A simple example with your code:
<?php foreach ($thisVideos as $video): ?>
<button class="btn btn-primary link"
data-url="http://www.youtube.com/v/<?=$video["entry_data"]["video-id"]?>">Video</button>
<?php endforeach; ?>
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<iframe width="400" height="300" frameborder="0" allowfullscreen=""></iframe>
</div>
</div>
</div>
</div>
<script>
$('.link').click(function () {
// get the url from the data attribute
var src = $(this).data('url');
$('#myModal').modal('show');
$('#myModal iframe').attr('src', src);
});
$('#myModal button').click(function () {
$('#myModal iframe').removeAttr('src');
});
</script>

Answer 2

May be this help you
<?php foreach ($thisVideos as $key=>$video):?>
..............
<div id="myModal_<?php echo $key; ?>" class="modal fade"
....................
..............
<script>
$('.link').click(function () {
var src = 'http://www.youtube.com/v/<?=$video["entry_data"]["video-id"]?>';
$('#myModal_<?php echo $key; ?>').modal('show');
$('#myModal_<?php echo $key; ?> iframe').attr('src', src);
});
$('#myModal_<?php echo $key; ?> button').click(function () {
$('#myModal_<?php echo $key; ?> iframe').removeAttr('src');
});
</script>
<?php endforeach; ?>
Hope you understand and it helps you.
Note Its not a good way.It just solves the way you want.

Answer 3

The trick is to have an unique id for #myModal and this can by done in so many different ways.
You can easily set a counter in your loop, for example,
$counter = $counter++;
Append
<div id="myModal_<?=$counter?>"
and in the js you should have
$('#myModal_<?=$counter?>')
This will give the video button link unique ids and all the video links will work.