Load youtube videos in popup when click on thumbnail

how to play youtube video in popup window using jquery

<script type=”text/javascript” src=”http://www.youtube.com/player_api”></script>
<script src=”http://code.jquery.com/jquery-latest.min.js” type=”text/javascript”></script><span onclick=”playvideo(‘1’);player1.playVideo();” class=”yt-link”><h1>Play</h1></span>
<div style=”display: none;” id=”pop_1″ class=”video-popup”>
<span onclick=”closevideo(‘1’);player1.pauseVideo();” class=”closed”>X</span>
<iframe width=”800″ height=”600″ frameborder=”0″ allowfullscreen=”true” onload=”player1=new YT.Player(this)” src=”http://www.youtube.com/embed/8HQIKJBUsQk?rel=0&amp;enablejsapi=1″ id=”if_”></iframe>
</div>

<span onclick=”playvideo(‘2’);player2.playVideo();” class=”yt-link”><h1>Play</h1></span>
<div style=”display:none;” id=”pop_2″ class=”video-popup”>
<span onclick=”closevideo(‘2’);player2.pauseVideo();” class=”closed”>X</span>
<iframe width=”800″ height=”600″ frameborder=”0″ allowfullscreen=”true” onload=”player2=new YT.Player(this)” src=”http://www.youtube.com/embed/X71R64AdoOo?rel=0&amp;enablejsapi=1″ id=”if_”></iframe>
</div>

<span onclick=”playvideo(‘3’);player3.playVideo();” class=”yt-link”><h1>Play</h1></span>
<div style=”display:none;” id=”pop_3″ class=”video-popup”>
<span onclick=”closevideo(‘3’);player3.pauseVideo();” class=”closed”>X</span>
<iframe width=”800″ height=”600″ frameborder=”0″ allowfullscreen=”true” onload=”player3=new YT.Player(this)” src=”http://www.youtube.com/embed/BOCvHWoqssI?rel=0&amp;enablejsapi=1″ id=”if_”></iframe>
</div>

<span onclick=”playvideo(‘4’);player4.playVideo();” class=”yt-link”><h1>Play</h1></span>
<div style=”display:none;” id=”pop_4″ class=”video-popup”>
<span onclick=”closevideo(‘4’);player4.pauseVideo();” class=”closed”>X</span>
<iframe width=”800″ height=”600″ frameborder=”0″ allowfullscreen=”true” onload=”player4=new YT.Player(this)” src=”http://www.youtube.com/embed/qBLN-sOL6eU?rel=0&amp;enablejsapi=1″ id=”if_”></iframe>
</div>
<script>
var noc = jQuery.noConflict();
function playvideo(ytid) {
noc(“#pop_”+ytid).show();
}
function closevideo(ids) {
noc(“#pop_”+ids).hide();
}
</script>

Leave a Reply

Your email address will not be published. Required fields are marked *