Call youtube video with click for a responsive section with jquery

1

I would like to call multiple videos from the YouTube channel for a section, the calls would be one by one, by click, to the various titles corresponding to the video, or it could also be a 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>functiongetVideoId(url){varregExp=/^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=)([^#\&\?]*).*/,match=url.match(regExp);if(match&&match[2].length===11){returnmatch[2];}else{thrownewError("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);
}
    
asked by anonymous 18.06.2015 / 21:10

0 answers