I made a youtube list where I can click on texts that load youtube videos.
There is only one problem: When I play a video and click on another video link, the video I was playing doesn't stop. So I tried stopping it using jQuery, but no result.
So this is what my php generates:
function generateVideo() {
echo '<script type="text/javascript" src="scripts/video.js"></script>';
$tags = initTags();
$query = '
SELECT * FROM `youtube_links`';
$result = mysql_query($query);
if ( !$result) {
die('Error: '.mysql_error());
}
echo '<div id="content"><table>';
$i = 0;
$className = "";
while ($row = mysql_fetch_array($result)) {
$i++;
if ($i == 1) {
$className = "active";
} else {
$className = "inactive";
}
echo '
<tr>
<td>
<a class="'.$className.'" id="item_'.$i.'" onclick="switchVideo(this)">
'.$row['Title'].'
</a>
</td>
</tr>
';
}
echo '</table></div>';
$query = '
SELECT * FROM `youtube_links`';
$result = mysql_query($query);
if ( !$result) {
die('Error: '.mysql_error());
}
echo '<div id="videoPlayer">';
$i = 0;
$className = "";
while ($row = mysql_fetch_array($result)) {
$link = $row['Link'];
$i++;
if ($i == 1) {
$className = "activePlayer";
} else {
$className = "inactivePlayer";
}
echo '<iframe class="'.$className.'" id="ytplayer'.$i.'" type="text/html" width="640" height="390"
src="'.$link.'?version=3&enablejsapi=1"
frameborder="0">
</iframe>';
}
echo '</div>';
}
And this is my JavaScript:
function switchVideo(obj) {
var idText = obj.id;
var idArray = idText.split("_");
var id = idArray[1];
var videoPlayer = document.getElementById('ytplayer' + id);
var elements = document.getElementsByClassName("activePlayer");
for (var i = 0; i < elements.length; i++) {
elements[i].className = "inactivePlayer";
$(elements[i]).pause();
}
$('.inactivePlayer').each(function() {
$(this).stopVideo();
});
videoPlayer.className = "activePlayer";
}
You can see I added the youtube API to the iframes, so what is going wrong?
