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.

After clicking the play button the gif player is open in video form. Following is the output of this example.

Next TopicJavascript Async Generator function

← prev next →

For Videos Join Our Youtube Channel: Join Now

Feedback

Send your Feedback to [email protected]

Help Others, Please Share

Learn Latest Tutorials

Splunk

SPSS

Swagger

Transact-SQL

Tumblr

ReactJS

Regex

Reinforcement Learning

R Programming

RxJS

React Native

Python Design Patterns

Python Pillow

Python Turtle

Keras

Preparation

Aptitude

Reasoning

Verbal Ability

Interview Questions

Company Questions

Trending Technologies

Artificial Intelligence

AWS

Selenium

Cloud Computing

Hadoop

ReactJS

Data Science

Angular 7

Blockchain

Git

Machine Learning

DevOps

B.Tech / MCA

DBMS

Data Structures

DAA

Operating System

Computer Network

Compiler Design

Computer Organization

Discrete Mathematics

Ethical Hacking

Computer Graphics

Software Engineering

Web Technology

Cyber Security

Automata

C Programming

C++

Java

.Net

Python

Programs

Control System

Data Mining

Data Warehouse

Javatpoint Services

JavaTpoint offers too many high quality services. Mail us on h[email protected], to get more information about given services.

Website Designing
Website Development
Java Development
PHP Development
WordPress
Graphic Designing
Logo
Digital Marketing
On Page and Off Page SEO
PPC
Content Development
Corporate Training
Classroom and Online Training
Data Entry

Training For College Campus

JavaTpoint offers college campus training on Core Java, Advance Java, .Net, Android, Hadoop, PHP, Web Technology and Python. Please mail your requirement at [email protected].
Duration: 1 week to 2 week

^{Like/Subscribe us for latest updates or newsletter}

JavaScript Tutorial

JavaScript Basics

JavaScript Objects

JavaScript BOM

JavaScript DOM

JavaScript Validation

JavaScript OOPs

JavaScript Cookies

JavaScript Events

Exception Handling

JavaScript Misc

JavaScript Advance

Differences

Questions

Lodash

MCQ

Interview Questions

GIF Player using CSS and JS

Example 1:

Example 2:

Example 3:

Feedback

Help Others, Please Share

Learn Latest Tutorials

Preparation

Trending Technologies

B.Tech / MCA

Javatpoint Services

Training For College Campus