SOLVED

YouTube iFrame API

Go to solution
Robb_Barrett
Level 10

YouTube iFrame API

Hi there -

I'm trying to use the YouTube iFrame API and I'm not having any luck.  I've tried it on a Marketo page and on a JSFiddle and neither seem to work, although it looks like it works on the following CodePen.

Instructions

YouTube Player API Reference for iframe Embeds  |  YouTube IFrame Player API  |  Google Developers

My Unsuccessful Fiddle:

YouTube iFrame API - JSFiddle

Working Codepen

https://codepen.io/soberdash/details/dMPWpz

Abomination Created when I put the CodePen on my page

GE Healthcare | Centricity Clinical Archive | Demo

1 ACCEPTED SOLUTION

Accepted Solutions
Robb_Barrett
Level 10

Re: YouTube iFrame API

I found alternative code that works. This needs to be placed above the HTML

// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player, playing = false;
function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
  height: '315',
  width: '560',
  videoId: '2gsFrMMkfMg',
  events: {
  'onReady': onPlayerReady,
  'onStateChange': onPlayerStateChange
  }
  });
}
 
 
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
  player.setPlaybackRate(1);
  event.target.playVideo();
}
  /** YouTube API
  -1 (unstarted)
  0 (ended)
  1 (playing)
  2 (paused)
  3 (buffering)
  5 (video cued)
  **/ 
 
function onPlayerStateChange(event) { 
  if(event.data === 0) { 
  hideVideo();
  }
}

View solution in original post

1 REPLY 1
Robb_Barrett
Level 10

Re: YouTube iFrame API

I found alternative code that works. This needs to be placed above the HTML

// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player, playing = false;
function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
  height: '315',
  width: '560',
  videoId: '2gsFrMMkfMg',
  events: {
  'onReady': onPlayerReady,
  'onStateChange': onPlayerStateChange
  }
  });
}
 
 
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
  player.setPlaybackRate(1);
  event.target.playVideo();
}
  /** YouTube API
  -1 (unstarted)
  0 (ended)
  1 (playing)
  2 (paused)
  3 (buffering)
  5 (video cued)
  **/ 
 
function onPlayerStateChange(event) { 
  if(event.data === 0) { 
  hideVideo();
  }
}

View solution in original post