The GIFs i.e. Graphics Interchange Format is a bitmap image format. These are short animaned images play and pause in loop. In compare to videos the size of GIF image is small so easy to view in slower internet connection as well. GIF is compressed using the LZW lossless data compression technique which reduces file size without affecting the visual quality. It consists of multiple images placed in a sequence to create animation.

Today GIF is a great mode of communication. People upload GIF images in various social networking sites like Facebook. Have you ever noticed we can even pause and play GIF images in Facebook like an usual video ? Do you have any idea how is that possible ? Facebook uses a small size video for creating GIF. It runs the video in infinite loop and uses the play pause option of the video to pause and resume.

In various forum people have asked about this feature like superuser. But it seems like there is no bullet proof solution. Some have also raised bug request in webkit. After inspired by Facebook we have created a javascript which will mimic a GIF with video auto loop. See the demo here.

<style>
	.video-wrapper{
		text-align: center;
		position: absolute;
		width: 100%;
	}
	.outer-gif{
		margin: 0 auto; 
	}
	.outer-gif{
		height: 80px;
		width: 80px;
		background-color: black;
		position: relative;
		border-radius: 50%;
		background-color: rgba(0,0,0,0.5);
    	transform: translateY(100%);
    	cursor: pointer;
	}
	.inner-gif{
		position: relative;
		left: 52%;
		top: 50%;
		transform: translate(-50%,-50%);
		height: 80%;
		width: 80%;
		position: relative;
		border-radius: 50%;
		border: 3px dashed #ffffff;
	}
	.inner-gif p{
		color: #ffffff;
		position: relative;
		top: 16%;
		left: 28%;
	}

</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
	function videoPausePlay(){
		var video = $("#video-player").get(0);
		$('.outer-gif').css('display','block');
	    if (video.paused === false) {
	    	$('.outer-gif').css('display','block');
	        video.pause();
	    } else {
	    	$('.outer-gif').css('display','none');
	        video.play();
	    }

	    return false;
	}
</script>
<div>
	<div class="video-wrapper">
		<video onclick="videoPausePlay()" width="320" height="240" id="video-player" loop preload="metadata">
		  <source src="https://funbutlearn.com/wp-content/uploads/2017/10/ducky.mp4" type="video/mp4">
		  Your browser does not support the video tag.
		</video>
	</div>
	<div class="outer-gif" onclick="videoPausePlay()">
		<div class="inner-gif">
			<p>GIF</p>
		</div>
	</div>
</div>