Play Video From YouTube/Office 365 In Popup Dynamically

In my earlier post 'Bootstrap Modal Popup Video' , I explained how we can play static video from Youtube and play in bootstrap modal popup. But many of the time we have requirement where we render data dynamically and play in modal popup.

Overview

In this blog I am going to fetch videos from Office 365 video and consume all videos and thumbnails and bind thumbnail with HTML element and whenever any image is clicked, the corresponding video will play in modal popup. If we want to play from Youtube it can be done at the same time we just need to change the api url in AJAX call.

We can directly bind with the video URL to the Iframe but doing so will impact page performance, so I used Thumbnail to display video image and actual playing of video will happen in popup on click of image.

The api to make call,

/portals/hub/_api/VideoService/Channels('Your Channel ID')/Videos //It provides all videos inside your channel

HTML

<body>
<div id="videoContent"></div>
<div id="myModal" 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">×</button>
<h4 class="modal-title">Office 365 Video</h4>
</div>
<div class="modal-body"> <iframe id="videoPopUp" autoplay width="560" height="315" frameborder="0" allowfullscreen></iframe> </div>
</div>
</div>
</div>
</body>

Scripts

<script type="text/javascript">
var VideoUrl = '';
$(document).ready(function() {
//Here we are getting video from only one channel we created
var stringSource = '';
$.ajax({
url: "/portals/hub/_api/VideoService/Channels('Your channel ID')/Videos",
type: "GET",
async: false,
headers: {
"accept": "application/json;odata=verbose"
},
success: function(data) {
var videoInfo = data.d.results;
$.each(videoInfo, function(key, value) {
stringSource += '<a href="#myModal" id="a' + key + '" class="btn btn-lg btn-primary" data-toggle="modal"><img onClick="getVideoUrl(' + key + ')" id="img' + key + '" src="' + value.ThumbnailUrl + '" alt="' + value.Url + '" height="100" width="100"></img></a><p>Title is "' + value.Title + '"</p><p>Description is "' + value.Description + '"</p><br/>';
});
},
error: function(data) {
alert('Error');
}
}).then(function(data) {
//alert('Success');
$('#videoContent').append(stringSource);
});
$("#myModal").on('hide.bs.modal', function(e) {
$("#videoPopUp").attr('src', '');
});
$("#myModal").on('show.bs.modal', function(e) {
if ((VideoUrl !== '') || (VideoUrl != 'undefined')) {
$("#videoPopUp").attr('src', VideoUrl);
} else {
alert('No Url Defined.');
}
});
});
function getVideoUrl(id) {
VideoUrl = '';
var imageId = "img" + id;
var imgUrl = $("#" + imageId).attr('alt');
this.VideoUrl = imgUrl;
};
</script>

External Reference

I have used url from bootstrap website, however you can embed url at your end.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Happy Coding!!!