HTML5 Video Color Filter Effect
How do I make an html5 video color filter effect?
Add a color filter effect over the HTML5 video element. This is done through adding an absolute div above the video and using the CSS property Pointer Events.. What is a html5 video color filter effect? How do you make a html5 video color filter effect? This script and codes were developed by Html5andblog on 24 August 2022, Wednesday.
HTML5 Video Color Filter Effect - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>HTML5 Video Color Filter Effect</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <video width="320" height="240" controls> <source src="http://www.html5andbeyond.com/3t-JAiBqopF/uploads/2014/05/example.mp4" type="video/mp4"> <source src="http://www.html5andbeyond.com/3t-JAiBqopF/uploads/2014/05/example.webm" type="video/webm">
</video> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
HTML5 Video Color Filter Effect - Script Codes CSS Codes
body {
background-color: #333;
}
.video-container {
position: relative;
margin: 50px auto 0;
-webkit-box-shadow: 0 0 100px 0 rgba(255,255,255,.3);
-moz-box-shadow: 0 0 100px 0 rgba(255,255,255,.3);
box-shadow: 0 0 100px 0 rgba(255,255,255,.3);
}
.video-container .video-filter {
position: absolute;
top: 0;
width: 100%;
height: 100%;
z-index: 9999;
pointer-events: none; /*Unofficial and Won't Validate*/
background-color: rgba(50,100,200,.5)
}
.video-container .video-filter-controls {
position: absolute;
right: -30px;
top: 0;
width: 30px;
height: auto;
background-color: orange;
}
.video-container .video-filter-controls .green {
background-color: #00FF00;
}
.video-container .video-filter-controls .red {
background-color: #FF0000;
}
.video-container .video-filter-controls .blue {
background-color: #0000FF;
}
.video-container .video-filter-controls .yellow {
background-color: #FFFF00;
}
.video-container .video-filter-controls .clear {
background-color: #fff;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: 1px solid rgba(0,0,0,.1);
}
.video-container .video-filter-controls span {
display: block;
width: 100%;
height: 20px;
}
HTML5 Video Color Filter Effect - Script Codes JS Codes
/*
Created By:
http://www.html5andbeyond.com
*/
$(document).ready(function(){
$('video').wrap('<div class="video-container"></div>');
$('.video-container').css({
'width':$('.video-container video').width(),
'height':$('.video-container video').height()
});
$('.video-container').append('<div class="video-filter-controls"><span class="green" data-color-filter="rgba(0,255,0,.3)"></span><span class="red" data-color-filter="rgba(255,0,0,.3)"></span><span class="blue" data-color-filter="rgba(0,0,255,.3)"></span><span class="yellow" data-color-filter="rgba(255,255,0,.3)"></span><span class="clear" data-color-filter="rgba(255,255,255,0)"></span></div><div class="video-filter"></div>')
$('.video-container .video-filter-controls span').on('click',function(){
$('.video-container .video-filter').css('background-color', $(this).attr('data-color-filter'));
});
});
Developer | Html5andblog |
Username | html5andblog |
Uploaded | August 24, 2022 |
Rating | 3 |
Size | 2,398 Kb |
Views | 50,600 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Copy Paste Base64 backgrounds | 2,859 Kb |
Brick by Brick - Full Functionality - Infinite Scroll | 4,497 Kb |
Coin Flip Application | 2,361 Kb |
A Pen by html5andblog | 1,538 Kb |
Letter by Letter JS Basic Example | 2,141 Kb |
Letter by Letter JS Example | 2,477 Kb |
Animated CSS Background - Moves with Cursor | 1,905 Kb |
JQuery News Ticker | 2,731 Kb |
HTML5 Canvas Animated Background Part 2 | 3,154 Kb |
JQuery Live Search Basic Example | 2,050 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Pagepilling.js | Blossk | 6,554 Kb |
AngularJS Datalist Directive | M-e-conroy | 2,366 Kb |
CSS Flip Animation | Bbodine1 | 2,525 Kb |
Simple Responsive Text | Fbrz | 2,282 Kb |
C.Rowe Button | Brownerd | 2,473 Kb |
TheCalendar.js | The-teacher | 6,330 Kb |
Simple Weather App | Cmwebby | 0 Kb |
SVG Text Masking | JMChristensen | 2,141 Kb |
BenU Maintenance Site | Ksherman | 4,893 Kb |
CSS Org Chart | Appirio-ux | 3,882 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!