I have a video-attended system in which I use the YouTube API as shown here to upload the videos:
Classes charge them asynchronously with ajax, like this:
jQuery.ajax({
type: "GET",
url: cursado.php,
data:
{
id_curso: id_curso
},
cache: false,
success : function(data){
// Cargo contenido
jQuery("#contenido").html(data);
},
});
When the class ends, I call the function again to load the next class.
The issue is that the first time I call the function that loads the video, it loads correctly, but when I call it the following times, the API events are not executed.
I upload an example so you can try:
index.html
<!DOCTYPE html>
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
</head>
<body>
<div id="contenedor">
</div>
<input id="boton" type="button" value="Ajax">
<script>
jQuery("body").on("click","#boton",function(){
jQuery.ajax({
type: "GET",
url: "api_youtube.html",
cache: false,
beforeSend: function() {
},
success : function(data){
jQuery("#contenedor").html(data);
},
error: function(){
},
complete: function(){
}
});
})
</script>
</body>
</html>
api_youtube.html
<iframe id="player" src="https://www.youtube.com/embed/DjB1OvEYMhY?enablejsapi=1"></iframe>
<script>
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player( 'player', {
events: { 'onReady': onPlayerReady }
});
}
function onPlayerReady(event) {
alert("hola");
}
</script>
<script src="https://www.youtube.com/iframe_api"></script>
As you can see the first time you click on the ajax button, a "Hello" alert comes up but the next few times no longer.