Video Gate Content with YouTube

videogateyoutube.html

<script type="text/javascript" src="https://s3.amazonaws.com/wildfireapp/assets/swfobject.js"></script>    

    <div id="video-container">
      <div id="ytapiplayer">
        You need Flash player 8+ and JavaScript enabled to view this video.
      </div>
    </div>
  
    <script type="text/javascript" src="https://s3.amazonaws.com/wildfireapp/assets/swfobject.js"></script>    

  <script type="text/javascript">
    {% plugin rawtext video_id %};
    var enteredUrl = "{{ video_id }}";
    var youtubeVideoID = enteredUrl.toString().split("?v=").pop().split('/').pop().split('&').shift();
    var youtubeUrl = "https://www.youtube.com/v/" + youtubeVideoID + "?enablejsapi=1&playerapiid=ytplayer&version=3?rel=0&modestbranding=1&showinfo=0&hd=1&showsearch=0&autohide=1";

    var params = { allowScriptAccess: "always" };
    var atts = { id: "myytplayer" };
    swfobject.embedSWF(youtubeUrl, "ytapiplayer", "659", "375", "8", null, null, params, atts);

    function onYouTubePlayerReady(playerId) {
      ytplayer = document.getElementById("myytplayer");
      ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
    };

    function onytplayerStateChange(newState) {
      if (newState === 0) {
          $('#pre-gate-content').fadeOut(300, function() {
            $('#gated-content').fadeIn(300);
          });
      };
    };

    function playVideo() {
        if (ytplayer) {
          ytplayer.playVideo();
        }
    };

  </script>