tengo un sistema de video-cursado en el cual utilizo la API de youtube como se muestra aquí para cargar los videos:
https://developers.google.com/youtube/iframe_api_reference?hl=es-419#Getting_Started
Las clases las cargo asincronicamente con ajax, de esta manera:
jQuery.ajax({
type: "GET",
url: cursado.php,
data:
{
id_curso: id_curso
},
cache: false,
success : function(data){
// Cargo contenido
jQuery("#contenido").html(data);
},
});
Cuando finaliza la clase llamo de nuevo a la función para que cargue la siguiente clase.
El asunto es que la primera vez que llamo a la función que carga el vídeo, se carga correctamente, pero cuando la llamo las siguientes veces, no se ejecutan los eventos de la API.
Subo un ejemplo para que puedan probar:
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>
Como podrán ver la primera vez que hacen click en el boton ajax sale un alert "Hola" pero las siguientes veces ya no.