OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Youtube iframe api not triggering onYouTubeIframeAPIReady

  • Thread starter Thread starter jribeiro
  • Start date Start date
J

jribeiro

Guest
I've been battling with the youtube iframe api for quite some time now. Somehow the method onYouTubeIframeAPIReady is not always triggered.

From the symptoms it seems a loading problem. No errors are shown in the inspector.

Here is my code:

HTML​


Code:
<div id="player"></div>
          <script>
            videoId = 'someVideoId';
            var tag = document.createElement('script');
            tag.src = "//www.youtube.com/iframe_api";
            var firstScriptTag = document.getElementsByTagName('script')[0];
            firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
          </script>

JS​


(called at the end of the page. I tried to place the code right after the above script and the result was the same.)

Code:
var isReady = false
  , player
  , poster
  , video;

$(function () {
$('.js-play').click(function (e) {
    e.preventDefault();
    interval = setInterval(videoLoaded, 100);
  });
});
function onYouTubeIframeAPIReady() {
  console.log(videoId)
  player = new YT.Player('player', {
    height: '445',
    width: '810',
    videoId: videoId,
    events: {
      'onReady': onPlayerReady//,
      //'onStateChange': onPlayerStateChange
    }
  });
}

function onPlayerReady(event) {
  isReady = true;
  console.log("youtube says play")
}

function videoLoaded (){
  if (isReady) {
      console.log("ready and play")
      poster.hide();
      video.show();

      $('body').trigger('fluidvideos');

      player.playVideo();
      clearInterval(interval);
  } 
}

The problem is that sometimes nothing gets printed by the console.log and nothing happens.

On mobile phones this happens all the time. Any ideas?

<p>I've been battling with the youtube iframe api for quite some time now. Somehow the method <code>onYouTubeIframeAPIReady</code> is not always triggered. </p>

<p>From the symptoms it seems a loading problem. No errors are shown in the inspector.</p>

<p>Here is my code:</p>

<h2>HTML</h2>

<pre><code><div id="player"></div>
<script>
videoId = 'someVideoId';
var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
</script>
</code></pre>

<h2>JS</h2>

<p>(called at the end of the page. I tried to place the code right after the above script and the result was the same.)</p>

<pre><code>var isReady = false
, player
, poster
, video;

$(function () {
$('.js-play').click(function (e) {
e.preventDefault();
interval = setInterval(videoLoaded, 100);
});
});
function onYouTubeIframeAPIReady() {
console.log(videoId)
player = new YT.Player('player', {
height: '445',
width: '810',
videoId: videoId,
events: {
'onReady': onPlayerReady//,
//'onStateChange': onPlayerStateChange
}
});
}

function onPlayerReady(event) {
isReady = true;
console.log("youtube says play")
}

function videoLoaded (){
if (isReady) {
console.log("ready and play")
poster.hide();
video.show();

$('body').trigger('fluidvideos');

player.playVideo();
clearInterval(interval);
}
}
</code></pre>

<p>The problem is that sometimes nothing gets printed by the <code>console.log</code> and nothing happens.</p>

<p>On mobile phones this happens all the time. Any ideas?</p>
 

Latest posts

Online statistics

Members online
0
Guests online
2
Total visitors
2
Top