JavaScript Video Gallery

As User request, I was searching how to make video gallery which able to connect to SharePoint List. finally I found beautiful JavaScript Video Gallery call UniteGallery that more than enough for what I expected. Herewith Easy way to make your portal look beautiful. I used SPServices to retrieve data from SharePoint List

1. Download jQuery , UniteGallery and SPservices (Create a Document Library and upload it)

2. Create Custom list call "VideoList" (you can name it as you wish but make sure mention in bellow Script)
Create 5 Columns: Title, Description, Link, Image1, Image2

Title : For Your Video Title
Description : Enter Description of Video
Link : Link of You Tube or Vimeo (you just enter Video code)
Image1 : This is the Thumbnail image for Video List
Image2 : This is the Thumbnail Image for View


3. Here is the JavaScript Code ( Save as TXT file it to Document Library and attach it to CEWP )

<script type="text/javascript" src="../YourSite/jQuery/jquery-1.12.3.min.js"></script>
<script type="text/javascript" src="../YourSite/jQuery/jquery.SPServices-2014.02.min.js"></script>
<script type="text/javascript" src="../YourSite/jQuery/unitegallery/unitegallery.js"></SCRIPT>
<script type="text/javascript" src="../YourSite/jQuery/unitegallery/ug-theme-video.js"></SCRIPT>
<link rel="stylesheet" href="../YourSite/jQuery/unitegallery/unite-gallery.css" />
<link rel="stylesheet" href="../YourSite/jQuery/unitegallery/skin-right-thumb.css" />

<script language="javascript" type="text/javascript">

$(document).ready(function() {
  $().SPServices({
    operation: "GetListItems",
    async: false,
    listName: "VideoList",
    CAMLViewFields: "<ViewFields></ViewFields>",
    completefunc: function (xData, Status) {
      $(xData.responseXML).SPFilterNode("z:row").each(function() {
var NewsTitle  = $(this).attr("ows_LinkTitle");
var NewsDec  = $(this).attr("ows_Description");
var NewsLink  = $(this).attr("ows_Link");
var NewsPic  = $(this).attr("ows_Image1");
var NewsPic2  = $(this).attr("ows_Image2");


        var liHtml11 = "<div data-type='youtube' data-title='" + NewsTitle + "' " + "data-description='" + NewsDec + "' "+ "data-thumb='" + NewsPic + "' "+ "data-image='" + "' " + NewsPic2 + "' " + "data-videoid='" + NewsLink + "' " + ">" + "</div>";


        $("#tasksUL4").append(liHtml11);
      });
    }
  });
});
</script>
<div id="tasksUL4" ></div>

<script type="text/javascript">

jQuery(document).ready(function(){

jQuery("#tasksUL4").unitegallery();

});

</script>

Simple. enjoy it !!