jQueryを使用してiframe srcをforeachし、関数を使用してIDとアクションを取得する

Question

jQueryとJSの新機能です。 jQueryを使用してこれらの関数を正しく書き直すにはどうすればよいですか？私はそれが手動のHTMLマークアップでうまくいっていた標準JSだと知っていますが、現在はページを通過してYouTube srcでiframeを見つけてIDを取得し、最初のサンプルマークアップでそれらを再作成する必要もあります。

私は完全に固執しています。私はそれを多かれ少なかれ持っていると思うが、どこに行くべきか分からない。

フィドル：https://jsfiddle.net/yurt5bb6/

最初の例では、私のマークアップを使用しています：

私が必要として動作

<div class="video-container"> 
    <div class="video-player" data-id="Cv_2mp3X868"></div> 
</div> 

、しかし、私は今、私は負荷のforeachとiframeから同じマークアップ機能を組み込むことを作成する必要があると思いますより良いはずです。

試み：

function createThumb(id) { 
    return '<img class="youtube-thumb" src="//i.ytimg.com/vi/' + id + '/hqdefault.jpg"><div class="play-button"></div>'; 
} 

function createIframe() { 
    var iframe = $("iframe"); 
    iframe.attr("src", "//www.youtube.com/embed/" + this.parentNode.dataset.id + "?autoplay=1&autohide=2&border=0&wmode=opaque&enablejsapi=1&controls=0&showinfo=0"); 
    iframe.attr("frameborder", "0"); 
    iframe.attr("id", "youtube-iframe"); 
    this.parentNode.replaceChild(iframe, this); 
} 

$(document).ready(function() { 

    // build video from default markup 
    var defaultVideo = $(".video-player"); 
    $(defaultVideo).each(function (index, value){ 
     var p = $('<div></div>'); 
     p.innerHTML = createThumb(v[n].dataset.id); 
     p.onclick = createIframe; 
     v[n].appendChild(p); 
    }); 

    // search for social embeds and recreate to our markup 
    $('iframe[src*="youtube.com"]').each(function() { 
     var loadedVideoURL = $('iframe').attr('src').match(/[^/]*$/)[0]; 
     console.log(loadedVideoURL); 
    }); 

}); 

Answer 1

私はネイティブJSとjQueryの厄介なミックスをクリーンアップしようとした自分のフィドルにいくつかの編集を行いました：https://jsfiddle.net/yurt5bb6/2/

デフォルト機能：

(function() { 
    $.each($('.video-player'), function() { 
     $(this).append(videoThumb($(this).data('id'))); 
     $(this).on('click', videoIframe); 
    }); 

    $.each($('iframe'), function() { 
     // Rebuild the given template 
     var player = $('<div class="video-player">'); 

     // Strip youtube video id for data-id attribute 
     var id = $(this).attr('src'); 
     id = id.substr(id.lastIndexOf("/")+1); 
     player.attr('data-id', id); 

     player.html(videoThumb(id)); 
     player.on('click', videoIframe); 

     var videoContainer = $('<div class="video-container">'); 
     videoContainer.append(player); 
     $(this).replaceWith(videoContainer); 
    }); 
})(); 

iframeレンダリング機能：

function videoIframe() { 
    var iframe = $('<iframe>'); 
    iframe.attr("src", "//www.youtube.com/embed/" + $(this).attr('data-id') + "?autoplay=1&autohide=2&border=0&wmode=opaque&enablejsapi=1&controls=0&showinfo=0"); 
    iframe.attr("frameborder", "0"); 
    iframe.addClass("youtube-iframe"); 
    $(this).empty(); 
    $(this).append(iframe); 
} 

また、CSSを変更し、youtube-iframeのidの代わりにクラスを作成しました。