Load youtube video on button click

by Mukesh Yadav

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<button data-id="QRVTi065vxo" class="loadVideo">Video 1</button>
<button data-id="epHWyU_EmZI" class="loadVideo">Video 2</button>
<button data-id="bnWNByS6D08" class="loadVideo">Video 3</button>
<iframe src="https://www.youtube.com/embed/QRVTi065vxo" id="loadVideo" />

CSS

#loadVideo{
  height: 300px;
  width: 500px;
}

JavaScript

$(function(){
	var baseUrl = 'https://www.youtube.com/embed/';
  var $iframe = $('#loadVideo');
	$('.loadVideo').on('click', function(){
  	var id = $(this).data('id');
    $iframe.attr('src', (baseUrl + id));
  });
});