1 Reply Latest reply on Aug 18, 2016 7:04 AM by Robb Barrett PRD

    YouTube iFrame API

    Robb Barrett PRD

      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

        • Re: YouTube iFrame API
          Robb Barrett PRD

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