YouTube iFrame API

[Robb_Barrett]

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

[Robb_Barrett · Accepted solution]

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 = "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();
	}
	}