Adding a play/pause button on an animated gif without being taken to the URL of the image
<p>I have been trying to do the following:</p>

<ul>
<li>add a CTA play/stop button (to be independently activated by the user) on an animated gif that programmatically already stops within 5 seconds;</li>
<li>avoid to be taken to the URL of the image when clicking on the button, that means that action on the button are distinct from action on clicking on the image area. </li>
</ul>

<p>I have initially made use of <a href="https://github.com/krasimir/gifffer" rel="nofollow">Gifffer</a>, a great library for automatically stops animated gifs, but it does not really fit with what I would like to do (it stops the images on loading), despite the fact that draws a very nice button and I am struggling to modify it to be able to achieve what I would like. </p>

<p>My html looks like this: </p>

<pre><code>&lt;!DOCTYPE html&gt;

&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;
    &lt;/title&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;a href="http://localhost/wordpress/2016/12/02/animated-gif/" rel="bookmark" title="Animated Gif"&gt;&lt;img alt="source" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" height="249" src="http://localhost/wordpress/wp-content/uploads/2016/12/source.gif" width="500"&gt;&lt;/a&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>I have re-used the nice Gifffer features to create a play/stop button, as follows:</p>

<pre><code>    var doc = document;
    var playButton = doc.createElement('div');
    playButton.setAttribute('class','Button');
    //nice settings from Gifffer
    var playSize = 60;
    playButton.setAttribute('style', 'width:' + playSize + 'px;height:' + playSize + 'px;border-radius:' + (playSize/2) + 'px;background:rgba(0, 0, 0, 0.5);position:absolute;top:50%;left:50%;margin:-' + (playSize/2) + 'px'); 
</code></pre>

<p>I have then tried to create jsfiddle by including the following code in a function:</p>

<pre><code>    function createPlayButton(context, func){
    var doc = document;
    var playButton = doc.createElement('div');
    playButton.setAttribute('class','Button');
    //nice settings from Gifffer
    var playSize = 60;
    playButton.setAttribute('style', 'width:' + playSize + 'px;height:' +  playSize + 'px;border-radius:' + (playSize/2) + 
    'px;background:rgba(0,  0, 0,  0.5); position:absolute;
    top:50%;left:50%;margin:-' + (playSize/2) + 'px'); 
    playButton.onclick = func;
    context.appendChild(playButton);
}
</code></pre>

<p>which then, I believe, it can be called from within window.onload, as follows:</p>

<pre><code>window.onload = function(){
    createPlayButton(document.body, function(){
        highlight(this.parentNode.childNodes[1]);
        createPlayButton(this.parentNode, this.onclick);
    });
}
</code></pre>

<p>I am not even able to create the button, let alone prevent to be taken to the image URL when clicked. Can you help? Here is the jsfiddle, note that I have replaced the animated gif with a static image as in my scenario the image has been already "frozen":</p>

<p><a href="https://jsfiddle.net/55dbv890/" rel="nofollow">https://jsfiddle.net/55dbv890/</a></p>

<p>Thank you,</p>