No announcement yet.

Hiding the product video.

  • Filter
  • Time
  • Show
Clear All
new posts

  • Hiding the product video.

    If you want to use videos on a product but not display the video frame until the customer clicks a Show Video / Hide Video link, then do this:
    Go to Design / Library / Layouts / JavaScript Header Functions / Standard Javascript Header Functions.
    Scroll to the bottom and append this new bit of code:
    <script type="text/javascript">
        function dpshowvideo(atag){
            var anc = $( atag ).attr('id').replace(/shvid_/, '');
            $( '#pvid_' + anc ).show(250);
            $( atag ).hide(250);
            $( '#hdvid_' + anc ).show(250);
            return false;
        function dphidevideo(atag){
            var anc = $( atag ).attr('id').replace(/hdvid_/, '');
            var vcont = $( '#pvid_' + anc );
            $( atag ).hide(250);
            $( '#shvid_' + anc ).show(250);
            // stop the video when it gets hidden
            vcont.find( 'iframe' ).each( function(){$(this).attr('src', $(this).attr('src'))} ); 
            vcont.find( 'video' ).each( function(){this.pause()} ); 
            return false;
    Go to Design / Library / Layouts / Embedded Video.
    Right-click Standard Product Video and choose Copy.
    Rename that copy to be "Expanding Product Video".
    Open Expanding Product Video and replace its contents with:
    <actinic:block if="%3cactinic%3avariable%20name%3d%22ProductEmbedVideo%22%20%2f%3e%20%21%3d%20%22%22" >
    <div id="pvid_<actinic:variable name="EncodedProductAnchor" encoding="perl" selectable="false" />" class="video-wrapper" style="display:none;">
        <actinic:block php="true" if="%3cactinic%3avariable%20name%3d%22IsPreviewMode%22%20%2f%3e" >
        $sVideoLink = '<actinic:variable encoding="perl" name="ProductEmbedVideo" selectable="false" />';
        echo str_replace('src="//', 'src="http://', $sVideoLink);
        <actinic:block if="%3cactinic%3avariable%20name%3d%22IsNotPreviewMode%22%20%2f%3e" >
            <actinic:variable name="ProductEmbedVideo" />
    <a id="shvid_<actinic:variable name="EncodedProductAnchor" encoding="perl" selectable="false" />" class="showhidevideo" href="#" onclick="dpshowvideo(this)">Show video</a>
    <a id="hdvid_<actinic:variable name="EncodedProductAnchor" encoding="perl" selectable="false" />" class="showhidevideo" style="display:none;" href="#" onclick="dphidevideo(this)">Hide video</a>
    That's the capability added. You can replace the "Show video" and "Hide video" above by whatever you like (e.g. play / cancel icons).

    To use it for a product, go to Product Details / Layout / Product / Product Video Layout and select "Expanding Product Video".

    Or you can set it for the whole site via Settings / Site Options / Layout / Product / Product Video Layout and select "Expanding Product Video".
    Norman -
    Edinburgh, U K / Bitez, Turkey