Friday 18 March 2016

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>