Sharepoint 2013 search display template hover panel

Question

I have a task in which I have to customize the search display template for webpage ,am which I did successfully by copying webpage template and modifying it .

I am using search result webpart but the hover panel of the modified template is not showing the snapshot of the webpage, can you tell me what might be the issue because I have just modified this

<div id="_#= $htmlEncode(itemId) =#_" name="Item" data-displaytemplate="WebPageItem" class="ms-srch-item" onmouseover="_#= ctx.currentItem_ShowHoverPanelCallback =#_" onmouseout="_#= ctx.currentItem_HideHoverPanelCallback =#_">                         
                _#=ctx.RenderBody(ctx)=#_   
                <div id="_#= $htmlEncode(hoverId) =#_" class="ms-srch-hover-outerContainer"></div>
            </div>

by this

<table>
                <tr>
                     <td>
            <a href="_#=ctx.CurrentItem.Path=#_">   _#=ctx.CurrentItem.NewsTitleOWSTEXT=#_   </a>
                      </td>

                </tr>

                 <tr>
                     <td>
              _#=ctx.CurrentItem.NewsDescriptionOWSMTXT=#_   
                      </td>

                </tr>


                <tr>
                     <td>
           PublishingTime -_#=ctx.CurrentItem.NewsPublishingDateDatatype=#_  
                      </td>

                </tr>
            </table>

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


            </div>
        </div>

what do I have to do to make the hover panel display the snapshot of webpage, or you could refer me to article that talks about this thing?

Answer 1

This should work:

<div class="ms-srch-hover-viewerContainer ms-srch-hover-siteViewerContainer">
    <div id="_#= idGlassViewerEncoded =#_" class="ms-srch-hover-glass-siteViewer"></div>
    <iframe id="_#=idViewerEncoded=#_" src="_#= $urlHtmlEncode(ctx.CurrentItem.csr_Path) =#_" scrolling="no" frameborder="0px" class="ms-srch-hover-siteViewer"></iframe>                            
</div>
<!--#_
            AddPostRenderCallback(ctx, function(){
            HP.loadSiteViewer(ctx.CurrentItem.id, ctx.CurrentItem.id + HP.ids.inner, id + HP.ids.viewer, ctx.CurrentItem.csr_Path, "glass_" + id + HP.ids.viewer);
            });
_#-->