0

I'm looking to embed Youtube videos into a Meteor project, using urls submitted by users. I want to collect only the 11-character ID at the end of users' Youtube URLs. Someone seems to have figured something out for a browser's current url here. I just need a similar solution for a url provided in a form:

How to get anything following the domain in a url, using Javascript

Can anyone help this insert statement do that? Any help would be much appreciated.

Template.vidForm.events({
  'submit #vid-form' : function(e, t) {
    var title = t.find('#vid-title').value
    , url = t.find('#vid-url').value;
    if (isNotEmpty(title)
        && isNotEmpty(url))
    {
      vids.insert({user: Meteor.userId(), username: Meteor.user().username, date: new Date(), title: title, url: url}, function(err){
          if (err)
            Alerts.add('Submission error: ' + err.reason, 'warning');
          else {
            Alerts.add('Your video has been accepted.', 'success');
          }
        }
      );
    }
    return false;
  }
});
Community
  • 1
  • 1
Quin
  • 441
  • 5
  • 12

2 Answers2

2

Here's what I settled on. I made use of one of the answers from here: How to replace multiple strings with the .replace() Method?

Template.vidForm.events({
  'submit #vid-form' : function(e, t) {
    var title = t.find('#vid-title').value,
    youtube = t.find('#vid-url').value,
    url = youtube.replace(/http:|https:|www.|youtube.com|watch\?v=|youtu.be|\//g,'');
    if (isNotEmpty(title)
        && isNotEmpty(url))
    {
      vids.insert({user: Meteor.userId(), username: Meteor.user().username, date: new Date(), title: title, url: url}, function(err){
          if (err)
            Alerts.add('Submission error: ' + err.reason, 'warning');
          else {
            Alerts.add('Your video has been accepted.', 'success');
          }
        }
      );
    }
    return false;
  }
});
Community
  • 1
  • 1
Quin
  • 441
  • 5
  • 12
0
getVideoId = function(url) {
  var a = document.createElement('a');
  a.href = url;
  return a.pathname;
}

Template.vidForm.events({
  'submit #vid-form' : function(e, t) {
    e.preventDefault();
    var title = t.find('#vid-title').value
      , url   = getVideoId(t.find('#vid-url').value);
    if (isNotEmpty(title)
        && isNotEmpty(url))
    {
      vids.insert({user: Meteor.userId(), username: Meteor.user().username, date: new Date(), title: title, url: url}, function(err){
          if (err)
            Alerts.add('Submission error: ' + err.reason, 'warning');
          else {
            Alerts.add('Your video has been accepted.', 'success');
          }
        }
      );
    }
  }
});
Serkan Durusoy
  • 5,447
  • 2
  • 20
  • 39
  • It doesn't seem to be working. It looks like location.host uses the url in the browser. What I want is use the url provided by a user via the form. – Quin Mar 17 '14 at 09:54
  • you're right, location is scoped to window on the browser. test the updated code now. – Serkan Durusoy Mar 17 '14 at 11:08
  • Thanks. I wish I could say it completely solves it. But I think I'll go another direction, by using "replace" to remove everything but the ID. Since I know it will be a Youtube link, there will only be limited text to replace. Like HTTP:// and www. and youtube.com/ or youtu.be/. Your answer works technically, but I'm worried it will get complicated to get past a link like http://www.youtube.com/watch?v=KiB7ny52-xw. As it stands, the solution only collects "/watch", and stops at the question mark. Then Youtube has another kind of url that is youtu.be/KiB7ny52-xw. – Quin Mar 18 '14 at 03:50