YouTubeのURLをJavaScriptで自動で埋め込みプレイヤーにする

公開: 2015-03-06 19:30
更新: 2016-04-29 06:03

極秘で運営している「SHINDAN.in」というものがあります。

名前診断を作成するサイトです。そしてよく考えたら極秘ではなかったです。

YouTubeのURLをJavaScriptで自動で埋め込みプレイヤーにする

ただ名前診断で結果を出すだけじゃ、
なんだかありきたりでインパクトがないような気がするので、
今日は診断結果にYouTubeのURLを入れると埋め込みプレイヤーに変換するようにJavaScriptで実装したいと思います。




1.難しい話じゃない

ぱっと見難しいような気がしますが、そんなことはありません。

要するに...


こんなURLを検知して、

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

こんな風に埋め込みプレイヤーのコードに変換するだけなのです。

<iframe src="http://www.youtube.com/embed/6CKZgIYJa3o" frameborder="0" allowfullscreen></iframe>

あとはブラウザが勝手に読み込んでくれます。




2.注意点

YouTubeのリンクは主に2種類あります。


このようにGET値がついた通常のURLと、

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

YouTubeが提供している短縮URLです。

http://youtu.be/6CKZgIYJa3o

このどちらにも対応したコードを書きましょう。




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



いい感じです。



この記事をシェア
この記事にコメントする
書き込む
あっきぃ(@appstars_aki)
Web、iOSなフリーランサーです。好きなものはお寿司です。でもお寿司は高いので普段は雑草とか拾ったドングリを食べています。お仕事や意味もなく毎月お小遣いをくれる人を探してます。

お仕事の依頼や自分で作ったアプリのレビューを希望しちゃう方はaki@appstars.jpまでご連絡ください。