Video pop up plugin

Developer
Jack_Quarry
Size
3,838 Kb
Views
14,168
  1. Video pop up plugin Previews
  2. Video pop up plugin HTML Codes
  3. Video pop up plugin CSS Codes
  4. Video pop up plugin JS Codes

How do I make an video pop up plugin?

JQuery Plugin. What is a video pop up plugin? How do you make a video pop up plugin? This script and codes were developed by Jack_Quarry on 11 October 2022, Tuesday.

Video pop up plugin Previews
IQ Test

Video pop up plugin - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>video pop up plugin</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="overlayX99">
</div>
<div id="mainWrapper_x">
<div class="clickerino" data-vidya="#contentX01">
<img src="https://d13yacurqjgara.cloudfront.net/users/292324/screenshots/2169197/red_bud.jpg" alt="" /> </div>
<div class="showOnPopX" id="contentX01"> <img src="https://d13yacurqjgara.cloudfront.net/users/292324/screenshots/2169197/red_bud.jpg" alt="" />
</div>
<div class="clickerino" data-vidya="#contentX02">
<img src="https://d13yacurqjgara.cloudfront.net/users/10562/screenshots/2169820/heman_pre_1x.jpg" alt="" /> </div>
<div class="showOnPopX" id="contentX02"> <img src="https://d13yacurqjgara.cloudfront.net/users/10562/screenshots/2169820/heman_pre_1x.jpg" alt="" />
</div> </div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Video pop up plugin - Script Codes CSS Codes

/* custom animations */
@-moz-keyframes reverse_scaleShow { 0% { -moz-transform: scale(1); transform: scale(1); opacity: 1; } 100% { -moz-transform: scale(0); transform: scale(0); opacity: 0; }
}
@-webkit-keyframes reverse_scaleShow { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 100% { -webkit-transform: scale(0); transform: scale(0); opacity: 0; }
}
@keyframes reverse_scaleShow { 0% { -moz-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 100% { -moz-transform: scale(0); -ms-transform: scale(0); -webkit-transform: scale(0); transform: scale(0); opacity: 0; }
}
@-moz-keyframes scaleShow { 0% { -moz-transform: scale(0); transform: scale(0); opacity: 0; } 100% { -moz-transform: scale(1); transform: scale(1); opacity: 1; }
}
@-webkit-keyframes scaleShow { 0% { -webkit-transform: scale(0); transform: scale(0); opacity: 0; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; }
}
@keyframes scaleShow { 0% { -moz-transform: scale(0); -ms-transform: scale(0); -webkit-transform: scale(0); transform: scale(0); opacity: 0; } 100% { -moz-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); opacity: 1; }
}
/* end of custom animations */
.activateX { display: block;
}
.clickerino { opacity: 0.7; width: 50%; cursor: pointer;
}
.clickerino:hover { opacity: 1;
}
img { width: 100%; float: left; height: auto;
}
/* Plugin specific CSS */
.overlayX99 { background: rgba(0, 0, 0, 0.69); position: fixed; top: 0; left: 0; bottom: 0; right: 0; height: 100%; width: 100%; z-index: 90; opacity: 0; visibility: hidden; -moz-animation: reverse_scaleShow 0.6s ease forwards; -webkit-animation: reverse_scaleShow 0.6s ease forwards; animation: reverse_scaleShow 0.6s ease forwards;
}
.overlayX99.activateX { opacity: 0; visibility: hidden; -moz-animation: scaleShow 0.4s ease forwards; -webkit-animation: scaleShow 0.4s ease forwards; animation: scaleShow 0.4s ease forwards;
}
.close99X { position: absolute; right: -90px; top: 0px; color: #fff; font-weight: bold; font-size: 90px; line-height: 79px; display: block; background: rgba(0, 0, 0, 0.4); height: 90px; width: 90px; text-align: center; cursor: pointer; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; z-index: 999;
}
@media (max-width: 480px) { .close99X { font-size: 40px; line-height: 39px; right: 0; height: 40px; width: 40px; }
}
.close99X:hover { background: black; transform: scale(0.8, 0.8);
}
.showOnPopX { position: fixed; height: 416px; width: 666px; top: 50%; margin-top: -208px; left: 50%; margin-left: -333px; display: none; z-index: 99;
}
.showOnPopX img { width: 100%;
}
@media (max-width: 480px) { .showOnPopX { height: 100%; width: 100%; top: 0; margin-top: 0; left: 0; margin-left: 0; display: none; z-index: 99; }
}
.showOnPopX.animateInShowX { display: block;
}
/* End of Plugin CSS */

Video pop up plugin - Script Codes JS Codes

(function() { //assign the click target a data-vidya = "#id_Of_PopOutDiv" "use strict" $.fn.videoPopX99 = function(options) { var settings = $.extend({ //duration: 700 }, options); var overlayX = $('.overlayX99'); return this.each(function() { var self = $(this); self.on('click', function() { console.log("show it") var vidyaData = self.data("vidya"); //alert(vidyaData); //run these animations overlayX.addClass("activateX"); var activeShowX = $(vidyaData).addClass("animateInShowX"); //append close button if(!activeShowX.find('.close99X').length){ $('<span></span>', {class:"close99X", text:"\327"}).appendTo(vidyaData).on('click', function(){ overlayX.removeClass("activateX"); $(vidyaData).removeClass("animateInShowX"); console.log("close it") }) } }) }) }
})(jQuery)
$(document).ready(function(){ $('.clickerino').videoPopX99();
})
Video pop up plugin - Script Codes
Video pop up plugin - Script Codes
Home Page Home
Developer Jack_Quarry
Username TheEnd
Uploaded October 11, 2022
Rating 3
Size 3,838 Kb
Views 14,168
Do you need developer help for Video pop up plugin?

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!

Jack_Quarry (TheEnd) Script Codes
Name
Swiper js mobile app
Responsive Image with Polyfill
A Pen by jack_Quarry
React render page offers
Featherlight pop ez 03 _ after ajax
Diagonal accordion - jquery and css
React Color Picker
Flex-slider customize 2
React Countdown Timer Updated
Recreate JS animate CSS display none
Create amazing marketing copy with AI!

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!