{if !empty($category.videos)}
<div style="margin-left: 8px;" class="product-secondary-images clearfix product-page-block {class file=$smarty.template editable=true}">
{literal}
  <script type="text/javascript">
  $(document).ready(
  function()
  {


     $("span.videoclick").click(
  function()
{  
$("div span").removeClass("active");
$(this).addClass("active")
$("div#video").css("display", "block")
$("div#gallery").css("display", "block")
}
  )
  }
  )
  </script>
  <style type="text/css">
 
  #gallery {
    padding: 10px;
    background-color: #383838;
color: #fff;
border: 1px solid #1a1a1a;/*#7b797b*/
  }
.videoclick{ float:right; padding:0; margin-right:10px;}
.videoclick:hover{ float:right; padding:0;}
.prod-media{ position: absolute; visibility: hidden; }
.amazingslider-img-0 > img {
  width: 600px;
}
 
  </style>
  {/literal}

<div style="position: relative; clear: both;width: 585px;height:550px;">

<div id="video" class="product-demos"  style="display:block;">

<div style="max-width:560px;">
    
    <!-- Insert to your webpage where you want to display the slider -->
    <div id="amazingslider-1" style="display:block;position:relative;margin:16px auto 56px;width:570px !important;">
    
        <ul class="amazingslider-slides" style="display:none;">

{foreach from=$category.videos item="videos"}
		{if $videos.type=="code"}

            <li><img src="//img.youtube.com/vi/{$videos.filename}/0.jpg" alt="" />
                <video preload="none" src="http://www.youtube.com/embed/{$videos.filename}" controls ></video>
</li>
{/if}
{/foreach}
</ul>
        
       
         <ul class="amazingslider-thumbnails" style="display:none;">
 {foreach from=$category.videos item="videos"}
		{if $videos.type=="code"}
            <li><img src="//img.youtube.com/vi/{$videos.filename}/default.jpg" alt="Video Thumbnail" width="120" height="90"></li>
            {/if}
            {/foreach}
        </ul>

    </div>
    <!-- End of body section HTML codes -->
    
</div>

</div>


{literal}
<script>
	$(document).ready(function(){
		$(".amazingslider-nav-container-0").css({'margin-left': '33px','margin-right' : '33px'});
		$(".amazingslider-bullet-wrapper-0 div").css({'margin-right': '0','width': '110px'});
	});
</script>
<style>
#amazingslider-1
{
width:570px !important;	
}
.amazingslider-watermark-0
{
display:none;	
}
</style>
{/literal}


</div>

</div>
{/if}