Hiding the product video.

[NormanRouxel]

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 );
        vcont.hide(250);
        $( 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;
    }
</script>

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>
    <actinic:block if="%3cactinic%3avariable%20name%3d%22IsNotPreviewMode%22%20%2f%3e" >
        <actinic:variable name="ProductEmbedVideo" />
    </actinic:block>
</div>
<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>
</actinic:block>

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".