YoutubeのURLを自動的に埋め込みに変更する方法

Article views7 VIEW
.png?resize=300%2C168&ssl=1 - YoutubeのURLを自動的に埋め込みに変更する方法

Related Post

  • No related post.

    WordPressで作ったサイトでこんな要望がありました。

    Youtubeの動画の埋め込み方が解らないという内容です。

    「ここのコードをコピーして貼り付けてくださいね!」と言えば済む話なのですが、いかんせんクライアントがお年を召した方なので

    ここはWordpressを改造して動画のURLを貼るだけで自動的に埋め込みに変換される様に変更した方が良いなと思い参考を探した所。

    あるんだなこれが。

    世の中はすごい人に溢れてる。

    実装して再現できました。

    以下が実装方法です。

    head内に記入

    <script>
    //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;
    };
    </script>
    

    これで完了しちゃいました。

    ためしにこの投稿にURLを貼ってみます。

    2018 09 13 0.57.26 - YoutubeのURLを自動的に埋め込みに変更する方法

    出力結果が以下です。

    おぉーサムシングエルス!

    便利になりました。

    参考サイトの著者に感謝。

    参考にしたサイト

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

    Pocket
    line88x20 - YoutubeのURLを自動的に埋め込みに変更する方法
    [`evernote` not found]

    Leave a Comment

    CAPTCHA