Problème avec l'api youtube et jQuery

lakamark
Javascript

Bonjour,
Je développe mon portfolio je veux personnaliser le lecteur de Youtube. 

$app = $('#app');
$app.on('click','#btn_player',function(event){
        $this = $(this);
        $yt_id = $this.data('ytid');
        onYouTubeIframeAPIReady($yt_id);
    });

Il lance cette fonction : 

function onYouTubeIframeAPIReady(video_id){
    // Charger api Youtube (javascript)
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag,firstScriptTag);
    var player;
    player = new YT.Player('player',{
        height : '720',
        width : '960',
        videoId : video_id',
        showinfo : 0,
        rel : 1,
        events : {
            onReady : onPlayerReady,
        }
    });
}

function onPlayerReady(event) {
    event.target.playVideo();
}

Le problème est que mon paramètre "video_id" est perdu lors de l'initisialisation de l'objet Youtube

Le deuxième problème est que j'ai une erreur de ce type : Uncaught ReferenceError: YT is not defined

Merci de votre aide.

4 réponses

betaWeb

Salut salut,

Alors je ne sais pas si ça vient de ton copier/coller ici ou pas, mais tu as une quote qui traine et qui bloque le script juste après "video_id":

function onYouTubeIframeAPIReady(video_id){
    // Charger api Youtube (javascript)
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag,firstScriptTag);
    var player;
    player = new YT.Player('player',{
        height : '720',
        width : '960',
        videoId : video_id,
        showinfo : 0,
        rel : 1,
        events : {
            onReady : onPlayerReady,
        }
    });
}

function onPlayerReady(event) {
    event.target.playVideo();
}

Après je me rappelle avoir eu un soucis similaire au tien, mais j'avais abandonné faute de temps.
Que te donne la console JS de l'inspecteur ?

lakamark
Auteur

J'ai modifier ma fonction :

function onYouTubeIframeAPIReady(video_id){
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag,firstScriptTag);
    var player;
    player = new YT.Player('player',{
        height : '720',
        width : '960',
        videoId : video_id,
        showinfo : 0,
        rel : 0,
        events : {
            onReady : onPlayerReady,
        }
    });
}

function onPlayerReady(event) {
    event.target.playVideo();
}

J'ai cette erreur dans ma console js : Uncaught ReferenceError: YT is not defined

betaWeb

Oui beh j'avais un truc similaire.

Vérifies dans le code source de la page que les scripts YT (les balises <script>) sont bien intégrés.

Tu utilises bien une iframe pour le player (l'API) ?

lakamark
Auteur

Je te comprend pas.