Calling youtube video with click to a responsive Section with jquery

Question

I would like to call several video from the Youtube channel for a Section, the calls would be one by one, through click, to the various titles corresponding to the video, or it can also be link. grateful.

    <ul>
    <li><a class="video-thumbnail" href="https://www.youtube.com/watch?v=_y7rKxqPoyg" title="Um título legal aqui">Vídeo 1</li>
    <li><a class="video-thumbnail" href="https://www.youtube.com/watch?v=dCWkeFBCPnA" title="Outro título legal aqui">Vídeo 2</li>
    <li><a class="video-thumbnail" href="https://www.youtube.com/watch?v=VcF7SySRkHs" title="Mais um título legal aqui">Vídeo 3</a></li>
</ul>

<div class="video-placeholder">
    <iframe width="820" height="380" frameborder="0" allowfullscreen="" src="https://www.youtube.com/embed/_y7rKxqPoyg"></iframe>
</div>


function getVideoId (url) {
    var regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=)([^#\&\?]*).*/,
         match = url.match(regExp);

    if (match && match[2].length === 11) {
        return match[2];
    } else {
        throw new Error("Invalid video URL");
    }
}

var videos      = document.querySelectorAll('.video-thumbnail'),
    placeholder = document.querySelector('.video-placeholder'),
    i, len;

for ( i = 0, len = videos.length; i < len; i++ ) {
    videos[i].addEventListener('click', function (e) {
        e.preventDefault();

        var videoUrl = getVideoId(this.getAttribute('href'));
        var title    = this.getAttribute('title');

        placeholder.innerHTML = '<iframe width="820" height="380" frameborder="0" allowfullscreen="" src="https://www.youtube.com/embed/' + videoUrl + '"></iframe>';
        document.title = title;
    }, false);
}