YouTubeのURLをJavaScriptで自動で埋め込みプレイヤーにする
極秘で運営している「SHINDAN.in」というものがあります。
名前診断を作成するサイトです。そしてよく考えたら極秘ではなかったです。
ただ名前診断で結果を出すだけじゃ、
なんだかありきたりでインパクトがないような気がするので、
今日は診断結果にYouTubeのURLを入れると埋め込みプレイヤーに変換するようにJavaScriptで実装したいと思います。
1.難しい話じゃない
ぱっと見難しいような気がしますが、そんなことはありません。
要するに…
こんなURLを検知して、
こんな風に埋め込みプレイヤーのコードに変換するだけなのです。
<iframe src=”http://www.youtube.com/embed/6CKZgIYJa3o” frameborder=”0″ allowfullscreen></iframe>
2.注意点
YouTubeのリンクは主に2種類あります。
このようにGET値がついた通常のURLと、
YouTubeが提供している短縮URLです。
このどちらにも対応したコードを書きましょう。
3.いざ実装
えいやっ
//HTMLデコードする関数
var decodeHTML = function(str) {
var decoded = $(“<div/>”).html(str).text();
return decoded;
};
//PHPで言うpreg_match_allをやってくれる関数
var preg_match_all = function(regex, haystack) {
var globalMatch = haystack.match(regex);
var matchArray = new Array();
for(var i in globalMatch) {
try {
var nonGlobalRegex = new RegExp(regex);
var nonGlobalMatch = globalMatch[i].match(nonGlobalRegex);
matchArray.push(nonGlobalMatch[0]);
} catch(e){}
}
return matchArray;
};
//URLからGET値のKeyを指定したら取って来てくれる
var getParameterByName = function(name, url) {
var query_string = url.split(“?”);
if(query_string.length >= 2) {
var params = query_string[1].split(“&”);
var i = 0;
while(i < params.length) {
var param_item = params[i].split(“=”);
if(param_item[0] == name) return param_item[1];
i++;
}
}
return “”;
};
//YouTubeの埋め込み
var youTubeEmbed = function(text) {
var URLs = preg_match_all(/(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig, text);
for(var i = 0; i < URLs.length; i++) {
var url = URLs[i];
if(url.match(/(?:http:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\/)?(.+)/g)) { //YouTubeのリンクかどうか判定
var youTubeId = getParameterByName(‘v’, decodeHTML(url));
if(youTubeId == ”) youTubeId = url.replace(/(?:http:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\/)?(.+)/g, ‘$1’);
youTubeId = (youTubeId.split(‘#’))[0]; //時間指定を消す。（残したい場合はこの処理いらないよっ）
text = text.replace(url, ‘<iframe src=”http://www.youtube.com/embed/’+youTubeId+'” frameborder=”0″ allowfullscreen></iframe>’);
}
}
return text;
};
こんな感じ。
関数名やコメントアウトを見れば意味は分かると思います。
（正規表現についてはじーっと見てればそのうち分かる気がする今日このごろ。）
ちゃんと動くかどうか試してみます。
var text = ‘https://www.youtube.com/watch?v=6CKZgIYJa3oというリンクとhttp://youtu.be/6CKZgIYJa3oというリンクです。’;
console.log(youTubeEmbed(text));
結果は
<iframe src=”http://www.youtube.com/embed/6CKZgIYJa3o” frameborder=”0″ allowfullscreen></iframe>というリンクと<iframe src=”http://www.youtube.com/embed/6CKZgIYJa3o” frameborder=”0″ allowfullscreen></iframe>というリンクです。
どちらのURLでもちゃんと変換できました。
ばっちぐーです。
4.サイトに乗せる
CSSでプレイヤーのサイズを統一したいので<iframe>を<div>要素で囲みました。
そして猫のYouTubed動画を100個集めました。
そんでもって「今日の猫動画」なるものを作成しました。
⇒ 今日の猫動画 – SHINDAN.in
いい感じです。