Play Button for YouTube
How do I make an play button for youtube?
What is a play button for youtube? How do you make a play button for youtube? This script and codes were developed by Chris Coyier on 30 August 2022, Tuesday.
Play Button for YouTube - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Play Button for YouTube</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Pause / Play Buttons for YouTube Videos</h1>
<!-- Make sure ?enablejsapi=1 is on URL -->
<iframe id="video" src="//www.youtube.com/embed/FKWwdQu6_ok?enablejsapi=1&html5=1" frameborder="0" allowfullscreen></iframe>
<!--
SVG ==
http://thenounproject.com/term/play/23255/
http://css-tricks.com/svg-tabs-using-svg-shape-template/
-->
<svg class="defs"> <defs> <path id="pause-button-shape" d="M24,0C10.745,0,0,10.745,0,24s10.745,24,24,24s24-10.745,24-24S37.255,0,24,0z M21,33.064c0,2.201-1.688,4-3.75,4 s-3.75-1.799-3.75-4V14.934c0-2.199,1.688-4,3.75-4s3.75,1.801,3.75,4V33.064z M34.5,33.064c0,2.201-1.688,4-3.75,4 s-3.75-1.799-3.75-4V14.934c0-2.199,1.688-4,3.75-4s3.75,1.801,3.75,4V33.064z"/> <path id="play-button-shape" d="M24,0C10.745,0,0,10.745,0,24s10.745,24,24,24s24-10.745,24-24S37.255,0,24,0z M31.672,26.828l-9.344,9.344 C20.771,37.729,19.5,37.2,19.5,35V13c0-2.2,1.271-2.729,2.828-1.172l9.344,9.344C33.229,22.729,33.229,25.271,31.672,26.828z"/> </defs>
</svg>
<div class="buttons"> <!-- if we needed to change height/width we could use viewBox here --> <svg class="button" id="play-button"> <use xlink:href="#play-button-shape"> </svg> <svg class="button" id="pause-button"> <use xlink:href="#pause-button-shape"> </svg>
</div> <script src="js/index.js"></script>
</body>
</html>
Play Button for YouTube - Script Codes CSS Codes
.button { width: 48px; height: 48px; cursor: pointer;
}
.button:hover { fill: white;
}
.defs { position: absolute; top: -9999px; left: -9999px;
}
iframe { float: left; width: 300px; height: 200px;
}
.buttons { padding: 1rem; background: #f06d06; float: left;
}
body { padding: 1rem;
}
Play Button for YouTube - Script Codes JS Codes
// https://developers.google.com/youtube/iframe_api_reference
// global variable for the player
var player;
// this function gets called when API is ready to use
function onYouTubePlayerAPIReady() { // create the global player from the specific iframe (#video) player = new YT.Player('video', { events: { // call this function when player is ready to use 'onReady': onPlayerReady } });
}
function onPlayerReady(event) { // bind events var playButton = document.getElementById("play-button"); playButton.addEventListener("click", function() { player.playVideo(); }); var pauseButton = document.getElementById("pause-button"); pauseButton.addEventListener("click", function() { player.pauseVideo(); });
}
// Inject YouTube API script
var tag = document.createElement('script');
tag.src = "//www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
Developer | Chris Coyier |
Username | chriscoyier |
Uploaded | August 30, 2022 |
Rating | 4 |
Size | 2,975 Kb |
Views | 42,504 |
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 |
Airtable Emoji Poll | 3,194 Kb |
Bookmarklet to make the text between 45 and 75 characters turn red. | 2,974 Kb |
Centering in the Unknown | 1,821 Kb |
Simple jQuery Slideshow | 1,911 Kb |
Data on Performance Culture | 1,948 Kb |
Generate Mobile Version of Table | 3,077 Kb |
SVG with Filters | 3,185 Kb |
Row and Column Highlighting with CSS Only | 2,180 Kb |
Simple Flexbox Responsive Nav | 2,818 Kb |
Make This Responsive | 2,086 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 |
A Pen by Brendan Skousen | Bskousen | 2,954 Kb |
Faces SVG animation | ScavengerFrontend | 2,957 Kb |
Text Looping Transition | Agelber | 5,619 Kb |
Simple Responsive Text | Fbrz | 2,282 Kb |
A Bouncy Menu Toggle | Billyysea | 4,563 Kb |
Underlined form fields | Mitchdot | 2,323 Kb |
SVG Scalable Text | Said_FD | 1,451 Kb |
CSS3 Button Examples | Volusion | 3,377 Kb |
Multi column experiment. | Spylefkaditis | 2,805 Kb |
Drifting Clouds | Benedikte | 2,247 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!