How to parse the video ID from new YouTube URLs

Question

I am trying to parse these URLs with Javascript.

It works for about 90% of them, but some of the newer urls dont work.

Does anyone know how to make it work for all?

Here is my code: http://jsfiddle.net/e26zstdp/

function matchYoutubeUrl(url){
    var p = /^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/;

    url = (decodeURIComponent(url));
    return (url.match(p)) ? RegExp.$1 : false ;
}

And here are the results:

https://www.youtube.com/watch?v=QGJyPfQa8No
parsed: QGJyPfQa8No

http://www.youtube.com/attribution_link?a=shbk6GU0PaQ&u=%2Fwatch%3Fv%3D9ZEdApyi9Vw%26feature%3Dshare
parsed: false

https://www.youtube.com/watch?v=HEc4RUhLQcs
parsed: HEc4RUhLQcs

https://www.youtube.com/watch?v=DYMM0OQpq6w
parsed: DYMM0OQpq6w

https://www.youtube.com/watch?v=Fqhc4ksS4Ig
parsed: Fqhc4ksS4Ig

https://www.youtube.com/watch?v=whLHguPnK0E&feature=youtu.be
parsed: whLHguPnK0E

https://www.youtube.com/watch?v=NapUmeWL94s
parsed: NapUmeWL94s

https://www.youtube.com/watch?v=7Pfu5NVoMg0
parsed: 7Pfu5NVoMg0

https://www.youtube.com/watch?v=HyJ7xOg537U
parsed: HyJ7xOg537U

https://www.youtube.com/watch?v=-FEXFplTURE
parsed: -FEXFplTURE

https://www.youtube.com/watch?v=CYBPLy7EE6o&feature=youtu.be
parsed: CYBPLy7EE6o

https://www.youtube.com/watch?v=EcqYR0um7WA
parsed: EcqYR0um7WA

http://www.youtube.com/watch?v=Z8HPrR-ulk0#t=121
parsed: Z8HPrR-ulk0

https://www.youtube.com/watch?v=P7AOJp1Pgoc
parsed: P7AOJp1Pgoc

https://www.youtube.com/watch?v=OnuB_v961mI
parsed: OnuB_v961mI

http://www.youtube.com/attribution_link?a=fQwFHkx3MIk&u=%2Fwatch%3Fv%3D9ZEdApyi9Vw%26feature%3Dshare
parsed: false

http://www.youtube.com/attribution_link?a=omtWNfY0EqE&u=%2Fwatch%3Fv%3D8PQiaurIiDM%26feature%3Dshare
parsed: false

https://www.youtube.com/watch?v=2vmfQiXv1-k
parsed: 2vmfQiXv1-k

https://www.youtube.com/watch?v=foRoDppzes8
parsed: foRoDppzes8

https://www.youtube.com/watch?v=vDVawKB1FwY&feature=player_detailpage#t=12
parsed: vDVawKB1FwY

https://www.youtube.com/watch?v=hHdbAuouc8k
parsed: hHdbAuouc8k

http://youtu.be/gbIv7W7rhx4
parsed: gbIv7W7rhx4

http://www.youtube.com/watch?v=ECdu4FTDqQ8
parsed: ECdu4FTDqQ8

http://www.youtube.com/attribution_link?a=2zu9o5hy6qU&u=%2Fwatch%3Fv%3Dd4pdrcNMxVs%26feature%3Dshare
parsed: false

http://www.youtube.com/attribution_link?a=VSJjnitXMK8&u=%2Fwatch%3Fv%3Dx8gVDzbhkNQ%26feature%3Dshare
parsed: false

https://www.youtube.com/watch?v=IHL9mIaFm3A
parsed: IHL9mIaFm3A

https://www.youtube.com/watch?v=VsL0ftvW0OE
parsed: VsL0ftvW0OE

https://www.youtube.com/watch?v=xDf_D0bcn1w
parsed: xDf_D0bcn1w

https://www.youtube.com/watch?v=zztKm5BT870
parsed: zztKm5BT870

http://www.youtube.com/watch?v=ETBD0EqQGoU
parsed: ETBD0EqQGoU

https://www.youtube.com/watch?v=o1cFARtOUhU
parsed: o1cFARtOUhU

http://www.youtube.com/watch?v=zNWdfo12Mio&feature=share
parsed: zNWdfo12Mio

https://www.youtube.com/watch?v=blOrY-nEGaE
parsed: blOrY-nEGaE

https://www.youtube.com/watch?v=hZ1nfKQZ408&list=UUInrn3uayZYgontzVpNYBfg
parsed: hZ1nfKQZ408

https://www.youtube.com/watch?v=kTjK3i_Oqaw
parsed: kTjK3i_Oqaw

http://youtu.be/MhznW5XhdUM
parsed: MhznW5XhdUM

https://www.youtube.com/watch?v=hiGAYi0Qi3A
parsed: hiGAYi0Qi3A

https://www.youtube.com/watch?v=pYC44YPb_5k
parsed: pYC44YPb_5k

https://www.youtube.com/watch?v=yncweASqUEA
parsed: yncweASqUEA

https://www.youtube.com/watch?v=dwYH7_CKZls
parsed: dwYH7_CKZls

https://www.youtube.com/watch?v=_WUcKgOav0c
parsed: _WUcKgOav0c

http://www.youtube.com/attribution_link?a=zdHH5_OROro&u=%2Fwatch%3Fv%3D2HuOpl0dOBk%26feature%3Dshare%26list%3DUUHjzHYQ2bxFa8xLGgpGN5qw%26index%3D21
parsed: false

https://www.youtube.com/watch?v=QWD1_CguEEE
parsed: QWD1_CguEEE

https://www.youtube.com/watch?v=6oLwQMUhvuY
parsed: 6oLwQMUhvuY

https://www.youtube.com/watch?v=Hq0F8zL1hZA
parsed: Hq0F8zL1hZA

https://www.youtube.com/watch?v=KBTDpnW2Sl8
parsed: KBTDpnW2Sl8

http://www.youtube.com/watch?v=8cICS9MtRRw&src_vid=_L6Phuwqi7Y&feature=iv&annotation_id=annotation_1630849029
parsed: 8cICS9MtRRw

http://youtu.be/g6QJybQBjyM
parsed: g6QJybQBjyM

https://www.youtube.com/watch?v=LdVxBO-ry3E
parsed: LdVxBO-ry3E

http://youtu.be/bLtUas02hig
parsed: bLtUas02hig

https://www.youtube.com/watch?v=k8JheFD5h3w
parsed: k8JheFD5h3w

http://youtu.be/2hg4hqCv0JY
parsed: 2hg4hqCv0JY

https://www.youtube.com/watch?v=q0HOEtyuIt4
parsed: q0HOEtyuIt4

http://youtu.be/bTFX_1fcF58
parsed: bTFX_1fcF58

http://youtu.be/WV6XLTM5PdU?list=UUi7GJNg51C3jgmYTUwqoUXA
parsed: WV6XLTM5PdU

https://www.youtube.com/watch?v=644DTmNuHxw
parsed: 644DTmNuHxw

https://www.youtube.com/watch?v=MxDZ0o9p56g
parsed: MxDZ0o9p56g

https://www.youtube.com/watch?v=lwaJwaTyOB4
parsed: lwaJwaTyOB4

http://youtu.be/YLn6z7NrvRE
parsed: YLn6z7NrvRE

https://www.youtube.com/watch?v=akdBSDvwwig
parsed: akdBSDvwwig

https://www.youtube.com/watch?v=0Zu_YcSSiow
parsed: 0Zu_YcSSiow

http://www.youtube.com/watch?v=ITTvgkO2Xw4
parsed: ITTvgkO2Xw4

https://www.youtube.com/watch?v=ybcNSoh8vI4&index=3&list=UUYf74ueBWdQopqsdE-RzEmg
parsed: ybcNSoh8vI4

http://youtu.be/UdW4ROw03QQ
parsed: UdW4ROw03QQ

https://www.youtube.com/watch?v=Oi7OvmKIIfQ
parsed: Oi7OvmKIIfQ

http://youtu.be/O02Tny2y7TA
parsed: O02Tny2y7TA

https://www.youtube.com/watch?v=XhBSgCiaPDQ
parsed: XhBSgCiaPDQ

https://www.youtube.com/watch?v=0jasLebHCSE
parsed: 0jasLebHCSE

https://www.youtube.com/watch?v=CvCSUEbAmpQ&feature=youtu.be&t=32s
parsed: CvCSUEbAmpQ

http://www.youtube.com/watch?v=uGCpxOLIzZ8
parsed: uGCpxOLIzZ8

http://youtu.be/1mrVyOe6Cc4?t=15s
parsed: 1mrVyOe6Cc4

https://www.youtube.com/watch?v=MumScDIZMJc
parsed: MumScDIZMJc

http://www.youtube.com/attribution_link?a=4B5sh0rz4rM&u=%2Fwatch%3Fv%3Ds9dHkIIb9GU%26feature%3Dshare
parsed: false

http://www.youtube.com/attribution_link?a=F-yGPa3G3Lw&u=%2Fwatch%3Fv%3DfGEXVMukMF0%26feature%3Dshare
parsed: false

http://www.youtube.com/watch?v=RO11aqHVIQE&feature=youtube_gdata_player
parsed: RO11aqHVIQE

http://youtu.be/n-4oTOnrfYk
parsed: n-4oTOnrfYk

http://www.youtube.com/watch?v=T37pmuGEzrc
parsed: T37pmuGEzrc

https://www.youtube.com/watch?v=0OKPMXu96gI
parsed: 0OKPMXu96gI

https://www.youtube.com/user/HondaVideo/OtherSide
parsed: false

http://youtu.be/nDvrAyj9x0o
parsed: nDvrAyj9x0o

https://www.youtube.com/watch?v=pBtrEZpa6OQ
parsed: pBtrEZpa6OQ

https://www.youtube.com/watch?v=tBc_4dPQusI
parsed: tBc_4dPQusI

https://www.youtube.com/watch?v=7nSB1SdVHqQ
parsed: 7nSB1SdVHqQ

https://www.youtube.com/watch?v=Z3eWDhuKUxU
parsed: Z3eWDhuKUxU

http://www.youtube.com/watch?v=5kPM9oDOFPc
parsed: 5kPM9oDOFPc

https://www.youtube.com/watch?v=OaYkKLlZDzE
parsed: OaYkKLlZDzE

https://www.youtube.com/watch?v=vWaw8-pBSz8
parsed: vWaw8-pBSz8

https://www.youtube.com/watch?v=NCjzHu9tzHw
parsed: NCjzHu9tzHw

http://youtu.be/MLFNUDsMbAM
parsed: MLFNUDsMbAM

https://www.youtube.com/watch?v=jCC3Wbl-Vv8
parsed: jCC3Wbl-Vv8

http://m.youtube.com/watch?v=vvDXWh-r9cM
parsed: false

https://www.youtube.com/watch?v=9EdywbLmQxM#t=1m5s
parsed: 9EdywbLmQxM

Answer 1

Here you go, to minimize side-effects and erratic results, extract the query data and put the properly decoded key/data pairs into a table. The videoID for the attribution_link pages is embedded in a query parameter that is nested in a url fragment that is encoded in a query parameter (so it's encoded twice and we shall decode twice). If this seems excessive, it's isn't; This will make resolving any future issues much easier if/when alterations are made or new patterns emerge (as opposed upkeeping a large nasty regexp to handle all cases).

function ytID(url){
  function getQueryData(queryString){
    var queryData=Object.create(null);
    queryString.split("&").some(function(qpair){
      qpair=qpair.split("=").map(decodeURIComponent);
      queryData[qpair[0]]=qpair[1];
    });
    return queryData;
  }
  if(url.match(/^https?:\/\/(?:youtu\.be|(?:www\.)?youtube\.com\/embed)\/([\w\-]+)/)){
     return RegExp.$1;   
  }  
  if(url.match(/^https?:\/\/(?:[\w\-]+\.)*youtube\.com\/(watch|attribution_link)\?([^\#]+)/)){
    var page=RegExp.$1;
    var qs=RegExp.$2;
    switch(page){
      case "watch":
        var q=getQueryData(qs);
        return q.v;
        break;
      case "attribution_link":
        var q1=getQueryData(qs);
        //return q1.u; //debugu;
        if(q1.u){
          //note q1.u is a 'watch' page path+query, which itself is encoded in a query parameter.
          if(q1.u.match(/^\/watch\?([^\#]+)/)){
            var q2=getQueryData(RegExp.$1);
            return q2.v
          }
        }
        break;
    }
  }
}

var ytURLs=[
  "http://youtu.be/gbIv7W7rhx4",
  "https://www.youtube.com/watch?v=P7AOJp1Pgoc",
  "https://www.youtube.com/watch?v=OnuB_v961mI",
  "http://www.youtube.com/attribution_link?a=fQwFHkx3MIk&u=%2Fwatch%3Fv%3D9ZEdApyi9Vw%26feature%3Dshare",
  "http://www.youtube.com/attribution_link?a=omtWNfY0EqE&u=%2Fwatch%3Fv%3D8PQiaurIiDM%26feature%3Dshare",  
];

ytURLs.map(ytID);

result:

/*
gbIv7W7rhx4,P7AOJp1Pgoc,OnuB_v961mI,9ZEdApyi9Vw,8PQiaurIiDM
*/

jsfiddle with the long url list you provided.

The only one that 'failed' is the one that clearly doesn't have a videoID embedded in it:
.../user/HondaVideo/OtherSide

Answer 2

^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=|attribution_link\?a=.+?watch.+?v(?:%|=)))((\w|-){11})(?:\S+)?$

Try this.Added attribution_link\?a= for the newer urls.See demo.

http://regex101.com/r/yZ7qJ6/5

Answer 3

I suggest parsing the URL into its component pieces, for example with URI.js, then checking (1) if the domain is youtube.com or youtu.be and (2) if there is a v in the query component. If so, take the component in (2) and you're done. This should be significantly more future-proof than your current method.

Of course you could do all this with a single regular expression but the complexity of parsing URI is such that it's worth using a library.