<h3>{{ me_product_video_tabname }}</h3>
{{ me_product_video_tabdesc }}
<ul class="list-inline mevideos">
    {% for me_video in me_videos %}
     <li><a class="thumbnail video-link" href="{{ me_video.popup }}" meautoplay="{{ me_product_video_autoplay }}" mecontrol="{{ me_product_video_controls }}" title="{{ heading_title }}"> <img src="{{ me_video.thumb }}" title="{{ heading_title }}" alt="{{ heading_title }}" /></a></li>
    {% endfor %}
</ul>
<script src="catalog/view/javascript/me_video/common.js"></script>
<script type="text/javascript"><!--
$('.thumbnails a').each(function() {
    if ($(this).attr('href').indexOf('#frame') >= 0 || $(this).attr('href').indexOf('#local') >= 0) {
        $(this).attr('meautoplay','{{ me_product_video_autoplay }}');
        $(this).attr('mecontrol','{{ me_product_video_controls }}');
    }
});
{% if not me_product_video_display %}
$('.thumbnails li:first a').after('<div class="mainthumbvideo"></div>');
{% endif %}
//--></script> 
<style>
@media(min-width:768px){
.mevideo-popup{
    width: {{ me_popup_width }}px;
    max-height: {{ me_popup_height }}px;
}
}
.mevideo-video{
    max-height:{{ me_video_height }}px;
}
.mevideomain-video{
    height:{{ me_video_height }}px;
}
{% if me_product_video_thumbnail %}
.video-link:after{
    background-image: url('{{ me_product_video_thumbnail }}');
}
{% endif %}
</style>