Product video popup

The image is critical when it comes to selling our products, show a video that can greatly help the product reaches our customers better.
With this trick we will place a link on the product page so that pressing one in the fancybox popup window appears.

We put the call to the script in the product.tpl file.

<script type="text/javascript">
				$(".fancyvideo").fancybox({
                type        : 'iframe',
                maxWidth    : 800,
                maxHeight   : 600,
                fitToView   : false,
                width       : '70%',
                height      : '70%',
                autoSize    : false,
                closeClick  : false,
                openEffect  : 'none',
                closeEffect : 'none'
                });</script>

Then in the text editor page put this html code to display the link to the video

<a class="fancyvideo" href="http://player.vimeo.com/video/17221844?autoplay=1">Product video</a>

This part of the link corresponds to the automatic start of the video

?autoplay=1

And put this code in the global.css

.fancyvideo:before {
    content: "\f01d";
    font-family: fontawesome;
    color: #333333;
    font-size: 22px;
    position: relative;
    padding: 5px 5px 5px 5px;
}
.fancyvideo {
    font-weight: bold;
    padding-top: 5px;
    line-height: 20pt;
}

Posted on 04/04/2014 in Prestashop

Share the Story

About the Author

Leave a reply

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Back to Top