Playing embedded API Youtube video on event

Question

I'm trying to render a Youtube video after the user has submitted its URL with .focusout()

$('#page_video').focusout(function(){
  var video_url = $(this).val();
  var video_id = youtubeLinkParser(video_url);

  renderVideo(video_id); // This is where I'd like to load video
});

I am using the Youtube API and the code recommended here (also see below)

    // 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);

    // This function creates an <iframe> (and YouTube player)
    //    after the API code downloads.

    var player;
    function onYouTubeIframeAPIReady(video_id) {
      player = new YT.Player('player', {
        height: $(window).height(),
        width: $(window).width(),
        videoId: video_id,
        playerVars: { 
             'autoplay': 0,
             'controls': 0,
             'loop': 1,
             'showinfo': 0,
             'modestbranding': 1
        },
        events: {
          'onReady': onPlayerReady,
          'onStateChange': onPlayerStateChange
        }
      });
    }

    // The API will call this function when the video player is ready.
    function onPlayerReady(event) {
      event.target.playVideo();
      event.target.mute();
    }

    // The API calls this function when the player's state changes.
    //    The function indicates that when playing a video (state=1),
    //    the player should play for six seconds and then stop.

    var done = false;
    function onPlayerStateChange(event) {
    }

    function stopVideo() {
      player.stopVideo();
    }

How do I call the video to render on focusOut(), I haven't had any luck putting the Youtube API code in a function and calling it.

Can this be done?

Thanks

@blex just get me the ID from the url http://stackoverflow.com/questions/18268233/get-youtube-video-id-from-link-with-javascript — cupcakekid, Sep 04 '14 at 18:26

score 1 · Accepted Answer · answered Sep 04 '14 at 18:32

This works for me:

// 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);

// This function creates an <iframe> (and YouTube player)
//    after the API code downloads.

var player;
function onYouTubeIframeAPIReady(video_id) {
  player = new YT.Player('player', {
    height: $(window).height(),
    width: $(window).width(),
    videoId: video_id,
    playerVars: { 
         'autoplay': 0,
         'controls': 0,
         'loop': 1,
         'showinfo': 0,
         'modestbranding': 1
    }
  });
}

function stopVideo() {
    player.stopVideo();
}

function youtubeLinkParser(string){
    var p = /^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/;
    return (string.match(p)) ? RegExp.$1 : false ;
}

function renderVideo(id){
    player.loadVideoById(id);
}

$('#page_video').focusout(function(){
  var video_url = $(this).val();
  var video_id = youtubeLinkParser(video_url);

  renderVideo(video_id); // This is where I'd like to load video
});

Playing embedded API Youtube video on event

1 Answers1