YouTube Vimeo URL Parser

youtube-vimeo-url-parser.js

function parseVideo (url) {
    // - Supported YouTube URL formats:
    //   - http://www.youtube.com/watch?v=My2FRPA3Gf8
    //   - http://youtu.be/My2FRPA3Gf8
    //   - https://youtube.googleapis.com/v/My2FRPA3Gf8
    // - Supported Vimeo URL formats:
    //   - http://vimeo.com/25451551
    //   - http://player.vimeo.com/video/25451551
    // - Also supports relative URLs:
    //   - //player.vimeo.com/video/25451551

    url.match(/(http:|https:|)\/\/(player.|www.)?(vimeo\.com|youtu(be\.com|\.be|be\.googleapis\.com))\/(video\/|embed\/|watch\?v=|v\/)?([A-Za-z0-9._%-]*)(\&\S+)?/);

    if (RegExp.$3.indexOf('youtu') > -1) {
        var type = 'youtube';
    } else if (RegExp.$3.indexOf('vimeo') > -1) {
        var type = 'vimeo';
    }

    return {
        type: type,
        id: RegExp.$6
    };
}

function createVideo (url, width, height) {
    // Returns an iframe of the video with the specified URL.
    var videoObj = parseVideo(url);
    var $iframe = $('<iframe>', { width: width, height: height });
    $iframe.attr('frameborder', 0);
    if (videoObj.type == 'youtube') {
        $iframe.attr('src', '//www.youtube.com/embed/' + videoObj.id);
    } else if (videoObj.type == 'vimeo') {
        $iframe.attr('src', '//player.vimeo.com/video/' + videoObj.id);
    }
    return $iframe;
}

function getVideoThumbnail (url, cb) {
    // Obtains the video's thumbnail and passed it back to a callback function.
    var videoObj = parseVideo(url);
    if (videoObj.type == 'youtube') {
        cb('//img.youtube.com/vi/' + videoObj.id + '/maxresdefault.jpg');
    } else if (videoObj.type == 'vimeo') {
        // Requires jQuery
        $.get('http://vimeo.com/api/v2/video/' + videoObj.id + '.json', function(data) {
            cb(data[0].thumbnail_large);
        });
    }
}

Very nice job, thanks a lot! :) cheers!

Really useful! Good job, thanks ;)

First of all, thank you for sharing the code!

Maybe you want to update the regexp with an additional Dailymotion support?
// - DailyMotion
// - http://www.dailymotion.com/video/x6ga7eg

url.match(/(http:|https:|)\/\/(player.|www.)?(vimeo\.com|youtu(be\.com|\.be|be\.googleapis\.com)|dailymotion.com)\/(video\/|embed\/|watch\?v=|v\/)?([A-Za-z0-9._%-]*)(\&\S+)?/);

iframe and thumbnail URIs are:

iframe -> https://www.dailymotion.com/embed/video/VIDEO_ID?PARAMS
thumbnail -> https://www.dailymotion.com/thumbnail/video/{video_id}

Update: I've created a forked version which includes support for DailyMotion. @yangshun

Hi everyone,

I am totally new at coding. And I think this is what I am looking for. To get the Vimeo address for a streaming video that is water falling with java script.

How do I run this script? I would appreciate if anyone can just point me in the direction of a tutorial or something online to learn.

Thank you.

Awesome! Thank you!

I had used this its realy helpfull thanx.

Very usefull, many thanks for share

I was actually searching for this to separate video url based on their types and this was really helpful in obtaining the type. Thanks a lot

Very useful, many thanks

Nice parser @yangshun, 😎

Thank you, it’s just saved me a headache!

I noticed urls that don’t include any protocol eg: www.youtube.com or youtube.com aren’t covered
I changed the first capture group to include // and it worked a charm.
For anyone else that wants it, just change:
(http:|https:|)\/\/(player.|www.)?
to:
(https?:\/\/|\/\/|)(player.|www.)?

Thanks a lot!! <3

Thanks for share.

Can someone would convert it to Swift?

Can someone share pattern just for Vimeo

I made a shorter version, with some improvements
^.*(vimeo\.com|youtu(be\.com|\.be|be\.googleapis\.com))\/(video\/|embed\/|watch\?v=|v\/)?([^#\&\?]*).*

But I haven't been able to find a fix for this url:
https://vimeo.com/ondemand/somegirls/69246426

This one not handling https://vimeo.com/369301154/459dfc68d3