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>
- <!-- Modal HTML -->
- <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() {
-
- 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) {
-
- $('#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">
- <!-- Optional theme -->
- <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>
- <!-- Latest compiled and minified JavaScript -->
- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
Happy Coding!!!