GIF Player using CSS and JS

In this article, we will understand the gif player using CSS and JS. The GIF Player library enables you to play, pause an animated GIF file just like a video player. It works in modern browsers and IE8+.

Following are the various examples of gif player using CSS and JS.

Example 1:

<! DOCTYPE html>    
<html>    	
    <head>    	
        <meta http-equiv = "Content-Type"    	
            content = "text/html; charset = UTF-8" />    
        <title> Example of  GIF Player using CSS and JS </title>    
        <meta name = "description"/>    
        <meta content = "width=800, initial-scale=1"    
        name = "viewport" />    
<script src = "https://code.jquery.com/jquery-3.5.1.min.js">    
        </script>                 
        <script src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"> </script>            
<style>
body { 
  font-family: 'Open Sans', sans-serif;
  background: linear-gradient(90deg, $blue, $yellow);  
margin: 0;
  padding: 0;
font-family: "Montserrat", sans-serif;
color: #fff;
}	
html {
  height: 100%;
  margin: 0;
  width: 100%;
  color: #FFF;
  background: #000;
}
img.gif {
	visibility: hidden;
} 
.jsgif {
	position: relative;
}
h2 {
  font-family: inherit;
  font-weight: 800; 
  color: black;  
  text-align: center;
  letter-spacing: 1px;  
  font-size: 1.1em;
}
.gifcontrol {	
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	cursor: pointer;
	&:after {
		transition: background 0.25s ease-in-out;
		position: absolute;
		content: " "; 
		display: block;
		left: calc(50% - 25px);
		top: calc(50% - 25px);
	}
	&.loading {
		background: rgba(235, 255, 215, 0.75);
		&:after {
			background: #FF9900;
			width: 50px;
			height: 50px;		
			border-radius: 50px;
		}
	}
	&.playing {
			&:after {
			opacity: 0;
			transition: opacity 0.25s ease-in-out;
			border-left: 20px solid #FF9900;
			border-right: 20px solid #FF9900;
			width: 50px;
			height: 50px;
      box-sizing: border-box;
		}
		&:hover:after {
			opacity: 1;
		}
	}
	&.paused {
		background: rgba(129 20 149 / 50%);
		&:after {
			width: 0;
			height: 0;
			border-style: solid;
			border-width: 25px 0 25px 50px;
			border-color: transparent #992d2d00 transparent #2c2519;
		}
	}
	transition: background 0.25s ease-in-out;
	z-index: 100;
}
</style>
<body>
<div style = "width: 600px; margin: auto; text-align: center; font-family: arial">
  <h2> Gif player using CSS and JavaScript </h2> 
  <img src = 'https://media.giphy.com/media/3o85xnsmXy0UempUKA/giphy.gif' class = 'gif' />
</div>
<script>
var gifElements = document.querySelectorAll('img.gif');
for(var e in gifElements) {
	var element = gifElements[e];
	if(element.nodeName == 'IMG') {
		var supergif = new SuperGif({
			gif: element,
			progressbar_height: 0,
			auto_play: false,
		});
		var controlElement = document.createElement("div");
controlElement.className = "gifcontrol loading g"+e;         supergif.load((function(controlElement) {
			controlElement.className = "gifcontrol paused";
			var playing = false;
			controlElement.addEventListener("click", function(){
				if(playing) {
					this.pause();
					playing = false;
					controlElement.className = "gifcontrol paused";
				} else {
					this.play();
					playing = true;
					controlElement.className = "gifcontrol playing";
				}
			}.bind(this, controlElement));
		}.bind(supergif))(controlElement));
		var canvas = supergif.get_canvas();		
		controlElement.style.width = canvas.width+"px";
		controlElement.style.height = canvas.height+"px";
    controlElement.style.left = canvas.offsetLeft+"px";
		var containerElement = canvas.parentNode;		containerElement.appendChild(controlElement);	
  } }
</script>
</body>
</html>

Explanation:

In this above example, we created an example of the gif player using CSS and JavaScript. In this we have seen a quick experiment in pure CSS how to cover a GIF with a play button instead of playing it.

How to embed your gif file into the document

<div class = " example">
  <img src = "gif.gif">
</div>

Output:

Following is the output of this example.

Example 2:

<! DOCTYPE html>    
<html>    	
    <head>    	
        <meta http-equiv = "Content-Type"    	
            content = "text/html; charset=UTF-8" />    
        <title> Example of  GIF Player using CSS and JS </title>    
        <meta name = "description"/>    
        <meta content = "width=800, initial-scale=1"    
        name = "viewport" />    
<script src =    
"https://code.jquery.com/jquery-3.5.1.min.js">    
        </script>                 
        <script src =    
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"> </script>            
<style>
body { 
  font-family: 'Open Sans', sans-serif;
  background: linear-gradient(10deg, blue, yellow);  
margin: 20;
  padding: 20;
font-family: "Montserrat", sans-serif;
color: #fff;
}	
html {
  height: 100%;
  margin: 0;
  width: 100%;
  color: #FFF;
  background: #000;
}
* {
  box-sizing: border-box;
}
h3 {
  font-family: inherit;
  font-weight: 700; 
  color: red;  
  text-align: center;
  letter-spacing: 1px;  
  font-size: 1.1em;
}
h2 {
  font-family: inherit;
  font-weight: 700; 
  color: red;  
  text-align: center;
  letter-spacing: 1px;  
  font-size: 1.1em;
}
  .gif {
    visibility: hidden;
  }
  #playing:checked {
    ~ .gif {
      visibility: visible;
    }
    ~.btn-play {
      display: none;
    }
    ~.btn-stop {
      display: block;
    } } }
.btn {
  display: block;
  width: 100%;
  padding: 1rem 1.6rem;
  border-top: 1px solid white;
  font-family: Arial, sans-serif;
  color: white;
  cursor: pointer;
  &:hover {
    background-color: #444;
  }
  &.btn-stop {
    display: none;
    .icon-stop {
      font-size: 135%;
      line-height: 1px;
    }
  }
}
</style>
<body>
<div class = "player-container">
  <input type = "checkbox" id = "playing" />  
  <img class = "gif" src = "https://media.giphy.com/media/3o85xnsmXy0UempUKA/giphy.gif">
  <label class = "btn btn-stop" for = "playing"> <span class = "icon-stop"> ■ </span> Stop </label>
  <label class = "btn btn-play" for = "playing"> ► Play </label>
</div>
<script>
var controlElement = document.createElement("div");
controlElement.className = "gifcontrol loading g"+e;         supergif.load((function(controlElement) {
			controlElement.className = "gifcontrol paused";
			var playing = false;
			controlElement.addEventListener("click", function(){
				if(playing) {
					this.pause();
					playing = false;
					controlElement.className = "gifcontrol paused";
				} else {
					this.play();
					playing = true;
					controlElement.className = "gifcontrol playing";
				}
			}.bind(this, controlElement));
		}.bind(supergif))(controlElement));
		var canvas = supergif.get_canvas();		
		controlElement.style.width = canvas.width+"px";
		controlElement.style.height = canvas.height+"px";
    controlElement.style.left = canvas.offsetLeft+"px";
		var containerElement = canvas.parentNode;		containerElement.appendChild(controlElement);	
  } }
</script>
</body>
</html>

Explanation:

How to embed your gif file into the document

<div class = "example">
  <img src = "gif.gif">
</div>

Output:

Following is the output of this example.

Example 3:

<! DOCTYPE html>    
<html>    	
    <head>    	
        <meta http-equiv = "Content-Type"    	
            content = "text/html; charset=UTF-8" />    
        <title> Example of  GIF Player using CSS and JS </title>    
        <meta name = "description"/>    
        <meta content = "width=800, initial-scale=1"    
        name = "viewport" />    
<script src =    
"https://code.jquery.com/jquery-3.5.1.min.js">    
        </script>                 
        <script src =    
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"> </script>            
<style>
body { 
  font-family: 'Open Sans', sans-serif;
  background: linear-gradient(70deg, blue, yellow);  
margin: 10;
  padding: 10;
font-family: "Montserrat", sans-serif;
color: #fff;
}	
html {
  height: 100%;
  margin: 0;
  width: 100%;
  color: #FFF;
  background: #000;
}
* {
  box-sizing: border-box;
}
h3 {
  font-family: inherit;
  font-weight: 700; 
  color: red;  
  text-align: center;
  letter-spacing: 1px;  
  font-size: 1.1em;
}
h2 {
  font-family: inherit;
  font-weight: 700; 
  color: red;  
  text-align: center;
  letter-spacing: 1px;  
  font-size: 1.1em;
}
label.clickgif {
background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -256 1792 1792"> <path d="M1288.678 637.83q0 37-33 56l-512 288q-14 8-31 8t-32-9q-32-18-32-55v-576q0-37 32-55 31-20 63-1l512 288q33 19 33 56zm128 0q0-104-40.5-198.5t-109.5-163.5q-69-69-163.5-109.5t-198.5-40.5q-104 0-198.5 40.5t-163.5 109.5-163.5t40.5-198.5zm256 0q0 209-103 385.5t-279.5 279.5q-176.5 103-385.5 103t-385.5-103q-176.5-103-279.5-279.5t-103-385.5q0-209 103-385.5t279.5-279.5q176.5-103 385.5-103t385.5 103q176.5 103 279.5 279.5t103 385.5z" fill=?grey"/> </svg>') grey no-repeat center center;
  display: block;
  float: left;
}
label.clickgif:hover {
background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns= "http://www.w3.org/2000/svg" viewBox= "0 -256 1792 1792"> <path d="M1288.678 637.83q0 37-33 56l-512 288q-14 8-31 8t-32-9q-32-18-32-55v-576q0-37 32-55 31-20 63-1l512 288q33 19 33 56zm128 163.5q69 69 163.5 109.5t198.5 40.5q104 0 198.5-40.5t163.5-109.5q69-69 109.5-163.5t40.5-198.5zm256 0q0 209-103 385.5t-279.5 279.5q-176.5 103-385.5 103t-385.5-103q-176.5-103-279.5-279.5t-103-385.5q0-209 103-385.5t279.5-279.5q176.5-103 385.5-103t385.5 103q176.5 103 279.5 279.5t103 385.5z" fill=?seagreen"/> </svg>') grey no-repeat center center;
  display: block;
  float: left;
}
label.clickgif:focus-win  {
background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns= "http://www.w3.org/2000/svg" viewBox= "0 -256 1792 1792"> <path d="M1288.678 637.83q0 37-33 56l-512 288q-14 8-31 8t-32-9q-32-18-32-55v-576q0-37 32-55 31-20 63-1l512 288q33 19 33 56zm128 163.5q69 69 163.5 109.5t198.5 40.5q104 0 198.5-40.5t163.5-109.5q69-69 109.5-163.5t40.5-198.5zm256 0q0 209-103 385.5t-279.5 279.5q-176.5 103-385.5 103t-385.5-103q-176.5-103-279.5-279.5t-103-385.5q0-209 103-385.5t279.5-279.5q176.5-103 385.5-103t385.5 103q176.5 103 279.5 279.5t103 385.5z" fill=?seagreen"/> </svg>') grey no-repeat center center;
  display: block;
  float: left;
}
.clickgif img { display: block; }
.clickgif input[type=checkbox] {
    position: absolute;
    left: -100vw;
}
.clickgif input[type=checkbox] {
    position: absolute;
    left: -100vw;
}
.clickgif input[type=checkbox] + img {
  opacity: 0;
}
.clickgif input[type=checkbox]:checked + img {
  opacity: 1;
}
</style>
<body>
<h2> Example </h2>
<h3>  GIF Player using CSS </h3>
<label class = "clickgif" title = "click to show gif">
  <input type = "checkbox">
  <img src = "https://media.giphy.com/media/XV74ZvGRXcZdS/source.gif" alt = " animated">
</label>
</body>
</html>

Explanation:

In this above example, we created an example of the gif player using CSS.

Output:

In this we have seen a quick experiment in pure CSS how to cover a GIF with a play button instead of playing it.