Show Video

by cintia_rodrigues

HTML

<div class="youtubePlayer">
<iframe id="ytplayer" type="text/html" width="640" height="360"
src="https://www.youtube.com/embed/NVWvq7suO6c?html5=1"
frameborder="0" allowfullscreen>
</iframe>
</div>

<ul>
    <li><a data-youtubeid="WFbeDw-Wwmg" href="javascript:;">Video 1</a></li>
    <li><a data-youtubeid="1E-b7UODMhk" href="javascript:;">Video 2</a></li>
     <li><a data-youtubeid="NVWvq7suO6c" href="javascript:;">Video 3</a></li>
</ul>

CSS

.youtubePlayer
{
    width: 640px;
    min-height: 400px;
    background-color: red;
}

JavaScript

$(document).ready(function(){
    $('ul li a').click(function(){
        
        
        var iframe = '<iframe id="ytplayer" type="text/html" width="640" height="360" src="https://www.youtube.com/embed/'+$(this).data('youtubeid')+'?html5=1" frameborder="0" allowfullscre;en></iframe>'
        $('.youtubePlayer').html(iframe);
        $('.youtubePlayer iframe').hide().delay(200).fadeIn();
        
    })
})