Tweak Library
Note: We have updated our folder structure in Neto 6 and this has not been updated on all tweaks yet. More info.

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