JSFiddle - React, Tailwind, and code Playground

by Sampath_Madhuranga

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Video Player</title>
</head>
<body>
 <div class="video-player">
 <!-- Button HTML (to Trigger Popup) -->
 <a href="#popup" class="btn btn-lg btn-primary" data-toggle="modal">Open Video Popup</a>
 <!-- Popup HTML -->
 <div id="popup" class="modal fade">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">Close</button>
 <h4 class="modal-title">Your Video</h4>
 </div>
 <div class="modal-body">
 <iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/tgbNymZ7vqY" frameborder="0" allowfullscreen></iframe>
 </div>
 </div>
 </div>
 </div>
</div> 
</body>
</html>

CSS

.video-player{
 	margin: 20px;
 }
 .modal-content iframe{
 margin: 0 auto;
 display: block;
 }

JavaScript

$(document).ready(function(){
 /* Get iframe src attribute value i.e. YouTube video url
 and store it in a variable */
 var url = $("#video").attr('src');
 
 /* Assign empty url value to the iframe src attribute when
 modal hide, which stop the video playing */
 $("#popup").on('hide.video.modal', function(){
 $("#video").attr('src', '');
 });
 
 /* Assign the initially stored url back to the iframe src
 attribute when modal is displayed again */
 $("#popup").on('show.video.modal', function(){
 $("#video").attr('src', url);
 });
});