Tuesday, May 14, 2013

SharePoint 2013/2016 Search: Adding a Hover Panel to the Video Horizontal Display Template

Check out the whole SharePoint 2013 Solution Series
New Titles Added Weekly!

In my previous post on Enhancing Video Results, I demonstrated how to display Video results in a horizontal fashion using the out-of-the-box Video horizontal template. However, this display does not incorporate a hover panel and thus nothing pops up when mousing over the results. No problem. I figured out how to add a hover panel to the template in just a few easy steps.

First, navigate to the Search Center display templates via SharePoint Designer 2013, similiar to the process explained in this post. For simplicity I am going to modify the display template file in-place but the recommended approach would be to make a copy and use that.

Locate the Item_Video_CompactHorizontal.html file, right-click, and select Edit File in Advanced Mode:

Paste this code at the top as shown in the image below:

var id = ctx.ClientControl.get_nextUniqueId();
var itemId = id + Srch.U.Ids.item;
var hoverId = id + Srch.U.Ids.hover;
var hoverUrl = "~sitecollection/_catalogs/masterpage/Display Templates/Search/Item_Video_HoverPanel.js";
$setResultItem(itemId, ctx.CurrentItem);
ctx.currentItem_ShowHoverPanelCallback = Srch.U.getShowHoverPanelCallback(itemId, hoverId, hoverUrl);
ctx.currentItem_HideHoverPanelCallback = Srch.U.getHideHoverPanelCallback();

Notice I am using the out-of-the-box Item_Video_HoverPanel .

Next, scroll down to the main <div> and change the id to use _#= $htmlEncode(itemId) =#_

(Click on image to display larger)

 Add the following code to that very same <div> tag:

onmouseover="_#= ctx.currentItem_ShowHoverPanelCallback =#_"
onmouseout="_#= ctx.currentItem_HideHoverPanelCallback =#_"
(Click on image for larger view)

Now add the following <div> after the first <div>:

<div id="_#= $htmlEncode(hoverId) =#_" class="ms-srch-hover-outerContainer"></div>

Save the changes to the template. Navigate to your Search Center and perform a search that returns Video results:

Hovering over the results shows the hover panel preview!!!



  1. Great article! I actually used it just to learn how to add a hover panel to a display template and it worked great!

  2. very useful, here I have an issue, I created a custom result blocks for video results. My custom query for getting particular video results is working , but the result block is not triggering .I tried with multiple queries but still it's same. don't know why, could you please let me know what exactly I'm missing in it? Thanks in Advance

    1. I would need to explore your settings and configuration to see what you are missing.

      We can do a tutor session to explore and resolve:https://www.wyzant.com/Tutors/stevetheman

    2. https://www.wyzant.com/Tutors/stevetheman

  3. any way to extract the search result in excel ?

    1. My gut reaction is to use javascript to call the Search API and generate .CSV file

  4. that's cool. very helpful indeed. My observation is the video panel always appears on the left side, which causes problems for the results wich are the extreme left. Can it be dynamically adjusted?

    1. I am not sure about dynamically but you could use CSS to adjust the positioning. I think by making it relative (position:relative) along with other styles it could be a dynamic workaround.

  5. Hi Its Working BUT - How Do I Change the Player to Have Option For Big Screen Option ?
    I Compared Between the Web Part Video (Sliverlight) 1 is x-application/x-silverlight-1 and the other is x-silverlight-2 (more Options on the player )How Do I change this stiings in the Html and where?

    1. I believe the big screen is only on the video player page which launches when you click on the video itself. You can try to increase the width of the hover panel and see if the player component conforms.


Matched Content