Fullscreen audio play button
How do I make an fullscreen audio play button?
What is a fullscreen audio play button? How do you make a fullscreen audio play button? This script and codes were developed by Reinis on 06 December 2022, Tuesday.
Fullscreen audio play button - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>fullscreen audio play button</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- AVOTS:
http://stackoverflow.com/questions/30309584/overlay-play-button-over-video -->
<html> <head> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="script.js"></script> </head> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper"> <video class="video" > <source src="" type="video/mp4" /> </video> <div class="playpause"></div>
</div> <audio class="video" id="myAudio"> <source src="https://www.dropbox.com/s/vm4zxen7lvtgn5y/Sound%20Effects%20-%20Clapping.mp3?dl=1">
</audio> </body> </html> <script src="js/index.js"></script>
</body>
</html>
Fullscreen audio play button - Script Codes CSS Codes
body { margin:0px; background-color:black; vertilcal-align:middle; margin:auto; height:1920px; width:1080px;
}
.video { width: 100%; border: 0px solid black;
}
.wrapper{ display:table; width:auto; position:relative; width:100%; height:100%;
}
.playpause { background-image:url(https://www.dropbox.com/s/xhhygrniwsamrsq/poga1.png?dl=1); background-repeat:no-repeat; width:100%; height:100vh; position:absolute; left:0%; right:0%; top:0%; bottom:0%; margin:auto; background-size:auto 100%; background-position: center;
}
Fullscreen audio play button - Script Codes JS Codes
$('.video').parent().click(function () { if($(this).children(".video").get(0).paused){ $(this).children(".video").get(0).play(); $(this).children(".playpause").fadeOut(); } else{ $(this).children(".video").get(0).pause(); $(this).children(".playpause").fadeIn(); }
});
Developer | Reinis |
Username | 72 |
Uploaded | December 06, 2022 |
Rating | 3 |
Size | 2,148 Kb |
Views | 10,120 |
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 |
Working hours | 2,258 Kb |
Html rowspan colspan | 1,517 Kb |
Transform modes | 1,726 Kb |
Events | 1,472 Kb |
Jquery menu dropdown | 1,691 Kb |
Jquery dropdown | 1,652 Kb |
Html5 video overlay play button | 2,033 Kb |
Spongebobs | 1,784 Kb |
Simple html js slideshow | 1,692 Kb |
Stretchy fragile div classes grid frame | 1,669 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 |
Custom Select Element | Agrayson | 3,616 Kb |
Border-radius animation | Yukulele | 2,480 Kb |
Angular-HAML | Cwacht | 2,022 Kb |
Sexy Social Buttons | Ipiyale | 2,226 Kb |
A Pen by Brendan Skousen | Bskousen | 2,954 Kb |
Testimonial Fancy tabs responsive | Amit-webdesigner | 3,056 Kb |
Simple Login Form | JoshBlackwood | 4,418 Kb |
Hard-Stop Gradients | Mackdoyle | 2,288 Kb |
Sticky menu on scroll | Senff | 2,869 Kb |
A Pen by tugce | Ecgutcnkr | 4,197 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!