This article has moved to a new home. View the updated version Tweak Library

YouTube Button (Product Page)

A YouTube play button, which opens up with a video demonstrating the item.

Industries

  • Music & Instruments
  • Toys & Games

Wireframe

Youtube Button

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 Neto'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%]