YouTube Button - Product Page

Add a YouTube play button on the product page which opens up with a video demonstrating the item.

Wireframe

Coding Instructions

In this example, the tag [@misc1@] is used to store just the code for the video, so to share the link for this video (https://youtu.be/xlcywgEMuGI), the last string of the URL, xlcywgEMuGI, would be stored in the misc1 field on Maropost Commerce Cloud's control panel. This is done to allow the iframe to load the responsive classes and make the data more versatile when it comes to supporting other video players or embedded video players.

[%site_value id:'footer_javascript'%]
    <script type="text/javascript" language="javascript">
        $(".nPlayYoutube").click(function() {
            var autoplay = '';
            if ($(this).attr('rel') == 'autoplay')
                autoplay = '&autoplay=1';
                $.fancybox({
                    'padding'             : 0,
                    'autoScale'           : true,
                    'transitionIn'        : 'elastic',
                    'transitionOut'       : 'elastic',
                    'title'               : false,
                    'href'                : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/') + autoplay,
                    'type'                : 'swf',
                    'swf'                 : {'allowfullscreen':'true'}
                });
            return false;
        });
    </script>
[%/site_value%]
[%if [@misc1@]%]
    <a href="//www.youtube.com/watch?v=[@misc1@]" class="btn btn-default btn-lg nPlayYoutube"><i class="fa fa-youtube-play"></i> Watch video</a>
[%/if%]