<div id="Playerholder" class="embedded-video" style="background: #000;">
<iframe width="720" height="400" src="https://goo.gl/Y7N2xN" frameborder="0" allowfullscreen=""></iframe>
</div>
<div id="player" class="col-xs-12 col-sm-12 col-md-12 wide-player">
<div id="video-wrapper">
<div style="margin-bottom: 10px;">
<a href="javascript:void(0)" class="btn btn-default" data-embed-id="1">server 1</a>
<a href="javascript:void(0)" class="btn btn-default" data-embed-id="2">server 2</a>
<a href="javascript:void(0)" class="btn btn-default" data-embed-id="3">server 3</a>
<a href="javascript:void(0)" class="btn btn-default" data-embed-id="4">server 4</a>
<a href="javascript:void(0)" class="btn btn-default" data-embed-id="5">server 5</a>
<a href="javascript:void(0)" class="btn btn-default" data-embed-id="6">server 6</a>
</div>
<script>
var embedMe = function(id, jQobj) {
var iframes = {};
iframes[1] = '<iframe width="720" height="400" src="https://www.youtube.com/embed/QEhqKFscp3A" frameborder="0" allowfullscreen></iframe>';
iframes[2] = '<iframe width="720" height="400" src="https://goo.gl/Y7N2xN" frameborder="0" allowfullscreen></iframe>';
iframes[3] = '<iframe width="720" height="400" src="https://goo.gl/Y7N2xN" frameborder="0" allowfullscreen></iframe>';
iframes[4] = '<iframe width="720" height="400" src="https://goo.gl/Y7N2xN" frameborder="0" allowfullscreen></iframe>';
iframes[5] = '<iframe width="720" height="400" src="https://goo.gl/Y7N2xN" frameborder="0" allowfullscreen></iframe>';
iframes[6] = '<iframe width="720" height="400" src="https://goo.gl/Y7N2xN" frameborder="0" allowfullscreen></iframe>';
if (typeof iframes[id] === 'undefined') {
return;
}
jQobj.removeClass('btn-default');
jQobj.addClass('btn-default');
jQuery('#Playerholder').html(iframes[id]);
}
jQuery('[data-embed-id]').click(function() {
if (jQuery(this).hasClass('btn-success')) {
return;
}
jQuery(this).parent().find('.btn').removeClass('btn-success');
jQuery(this).parent().find('.btn').addClass('btn-default');
jQuery(this).addClass('btn-success');
jQuery(this).removeClass('btn-default');
var id = jQuery(this).data('embed-id');
embedMe(id, jQuery(this));
});
</script>
</div>
</div>
OR From This Link :
https://jsfiddle.net/MRKIRA/nmrdu2s8/
eny one tell me why it doesn't work
<iframe width="720" height="400" src="https://goo.gl/Y7N2xN" frameborder="0" allowfullscreen=""></iframe>
</div>
<div id="player" class="col-xs-12 col-sm-12 col-md-12 wide-player">
<div id="video-wrapper">
<div style="margin-bottom: 10px;">
<a href="javascript:void(0)" class="btn btn-default" data-embed-id="1">server 1</a>
<a href="javascript:void(0)" class="btn btn-default" data-embed-id="2">server 2</a>
<a href="javascript:void(0)" class="btn btn-default" data-embed-id="3">server 3</a>
<a href="javascript:void(0)" class="btn btn-default" data-embed-id="4">server 4</a>
<a href="javascript:void(0)" class="btn btn-default" data-embed-id="5">server 5</a>
<a href="javascript:void(0)" class="btn btn-default" data-embed-id="6">server 6</a>
</div>
<script>
var embedMe = function(id, jQobj) {
var iframes = {};
iframes[1] = '<iframe width="720" height="400" src="https://www.youtube.com/embed/QEhqKFscp3A" frameborder="0" allowfullscreen></iframe>';
iframes[2] = '<iframe width="720" height="400" src="https://goo.gl/Y7N2xN" frameborder="0" allowfullscreen></iframe>';
iframes[3] = '<iframe width="720" height="400" src="https://goo.gl/Y7N2xN" frameborder="0" allowfullscreen></iframe>';
iframes[4] = '<iframe width="720" height="400" src="https://goo.gl/Y7N2xN" frameborder="0" allowfullscreen></iframe>';
iframes[5] = '<iframe width="720" height="400" src="https://goo.gl/Y7N2xN" frameborder="0" allowfullscreen></iframe>';
iframes[6] = '<iframe width="720" height="400" src="https://goo.gl/Y7N2xN" frameborder="0" allowfullscreen></iframe>';
if (typeof iframes[id] === 'undefined') {
return;
}
jQobj.removeClass('btn-default');
jQobj.addClass('btn-default');
jQuery('#Playerholder').html(iframes[id]);
}
jQuery('[data-embed-id]').click(function() {
if (jQuery(this).hasClass('btn-success')) {
return;
}
jQuery(this).parent().find('.btn').removeClass('btn-success');
jQuery(this).parent().find('.btn').addClass('btn-default');
jQuery(this).addClass('btn-success');
jQuery(this).removeClass('btn-default');
var id = jQuery(this).data('embed-id');
embedMe(id, jQuery(this));
});
</script>
</div>
</div>
OR From This Link :
https://jsfiddle.net/MRKIRA/nmrdu2s8/
eny one tell me why it doesn't work