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 |
Stretching page based on tables and percentage | 4,491 Kb |
Working hours | 2,258 Kb |
Stretchy fragile div classes grid frame | 1,669 Kb |
Jquery single page menu | 2,423 Kb |
Jquery menu dropdown | 1,691 Kb |
Vimeo video in background | 1,718 Kb |
Clickable table cell 2 | 1,716 Kb |
Jquery dropdown | 1,652 Kb |
Spongebobs | 1,784 Kb |
Full page iFrame | 1,390 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 |
Ocean | Gordonnl | 2,817 Kb |
Draggable directive | YahyaKacem | 2,277 Kb |
Background Images | Jooonebug | 2,100 Kb |
React Markdown Previewer | C0d0er | 3,190 Kb |
Static Image to Video Block | Grayghostvisuals | 4,864 Kb |
A Pen by Ben Babics | Benbabics | 2,957 Kb |
JS Beispiel getElementsByClassName 3 | HSZG-Frontend-Kurs | 1,988 Kb |
CSS Grid Overlay | Cliffpyles | 3,090 Kb |
Flat iOS 7 Safari Icon | Rss | 3,332 Kb |
The CodePen Logo | Kindofone | 4,259 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!