My js looks like this:

var tag = document.createElement('script'); tag.src = "https://www.youtube.com/player_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); var player; function onYouTubePlayerAPIReady() { player = new YT.Player('ytplayer', { height: '360', width: '640', videoId: 'ZF_1vqGZgw0', events: { 'onReady': onPlayerReady } }); } function onPlayerReady(event) { event.target.playVideo(); } onYouTubePlayerAPIReady();

in markup:

 <div class="slide" id="ytplayer"></div>

The browser gives an error:

 Uncaught ReferenceError: YT is not defined

What am I doing wrong???

I solved the problem, I attach the code with the solved spacebar from the bottom.

**

 $(document).ready(function () { function loadPlayer() { if (typeof(YT) == 'undefined' || typeof(YT.Player) == 'undefined') { var tag = document.createElement('script'); tag.src = "https://www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); window.onYouTubePlayerAPIReady = function () { onYouTubePlayer(); }; } } var player; function onYouTubePlayer() { player = new YT.Player('ytplayer', { height: '360', width: '640', videoId: 'ZF_1vqGZgw0', events: { 'onReady': onPlayerReady, } }); } function onPlayerReady(event) { event.target.playVideo(); } $(function () { loadPlayer(); }) });
  • And where is the <script> that loads the YT library? - gil9red
  • @ gil9red the first three lines, isn't it what you ask? He added his skills via js to <head> - Rafael Shepard
  • I 'm sorry , look, here is your problem and its solution: stackoverflow.com/questions/31065032 - gil9red
  • @ gil9red Please see the code, I added the current version. When you call onYouTubePlayer, the browser gives the error: onYouTubePlayer is not defined at window.onYouTubePlayerAPIReady - Rafael Shepard
  • one
    Added by. Do you mind that I used your code to answer? - gil9red

1 answer 1

The answer to the problem was the answer .

Author-adapted question code:

 $(document).ready(function () { function loadPlayer() { if (typeof(YT) == 'undefined' || typeof(YT.Player) == 'undefined') { var tag = document.createElement('script'); tag.src = "https://www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); window.onYouTubePlayerAPIReady = function () { onYouTubePlayer(); }; } } var player; function onYouTubePlayer() { player = new YT.Player('ytplayer', { height: '360', width: '640', videoId: 'ZF_1vqGZgw0', events: { 'onReady': onPlayerReady, } }); } function onPlayerReady(event) { event.target.playVideo(); } loadPlayer(); });
  • Why do a 2 nd check to load the document? - And
  • @And you are right corrected - gil9red
  • @gil9red please tell me, I'm still trying to make this logic - when I click on a video, I can immediately play it in fullscreen, is it possible to implement this on youtube api? - Rafael Shepard
  • @RafaelShepard, I do not know. Try the codepen.io/kyokid/pen/egQgzW function function playFullscreen (){ - gil9red