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:
Working Codepen
https://codepen.io/soberdash/details/dMPWpz
Abomination Created when I put the CodePen on my page
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(); | |
| } | |
| } | |
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.