Youtube iframe API player undefined Firefox

Youtube iframe API player undefined Firefox

When using the Youtube iframe api in Firefox your player.playVideo() call may not work...

You may find when using the Youtube iframe api in Firefox your player.playVideo() call (or something similar) does not work and reports an undefined object. This is because for whatever reason it takes a good few seconds for the onYouTubeIframeAPIReady onReady function to load. Calling any of the playback control methods too quickly will fail and cause you all sorts of jip.

In order to avoid this issue we have created a simple readyState variable and used setTimeout on a custom playVideo() function to not execute the api playVideo() until the player is ready.

Please see the code below for a working example.

Note: Setting wmode to transparent or opaque will most likely fix any z-index issues you are having (as long as your z-index is setup correctly).

HTML

<div id="player"></div>

Javascript

<script>
  var tag = document.createElement('script');

  tag.src = "//www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
        width: '682',
        height: '383',
        videoId: 'l-gQLqv9f4o',
        playerVars: {
        'controls' : 0,
        'modestbranding' : 1,
        'rel' : 0,
        'showinfo' : 0,
        'wmode' : transparent
      },
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
  }
  var ready = false;
  function onPlayerReady(event) {
    ready = true;
  }

  function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING) {
      // Video playing
    } else {
      //Video has paused
    }
  }

  function stopVideo() {
    player.stopVideo();
  }

  function playVideo() {
    if(ready) player.playVideo();
    else setTimeout(function(){ playVideo() },1000);
  }
</script>
Please recommend us if you found this article helpful:
Anthony Luxton
Author
Anthony Luxton
Director

Published:
26th February, 2013

Infographics

5 reasons why you need a website
Android usage – Medina Valley Centre
Website success benchmark
View all

Interviews

Interview with Mr Tom Fallick
Interview with Samuel Claxon
Interview with Anthony Luxton
View all

iPad Web Design

Responsive web design example
iPad Javascript hover
Introduction to iPad development
View all

Marketing

Why you should run an e-mail campaign
View all

Print

The intricacies of preparing for print
View all

Search Engine Optimisation

Getting started in guest blogging
Website recommendations for 2013
The importance of site structure for SEO
View all

Web Development Tips & Tricks

Youtube iframe API player undefined Firefox
Show and hide input password field
Pixel-perfect webpages with just CSS
View all

You and Your Website

LinkedIn For Business
How much content is enough?
How often should I update my blog?
View all

Useful Links

Youtube Iframe API