Calculator Tools Calculator Tools
Create

YouTube Play Button Simulator

Sep 18, 2023

About this app

Simulate the YouTube play button

YouTube Play Button Simulator

Related apps

Put this on your site

Source

                    <html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">

<title>YouTube Play Button Simulator</title>
<meta name="description" content="Simulate the YouTube play button">
<meta name="keywords" content="YouTube, play button, simulator">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<script type="text/javascript">
try {
// App Javascript Goes Here. Place your entire script content inside the try block for error handling.
document.addEventListener("DOMContentLoaded", function() {
// Add event listeners to simulate the YouTube play button
$("#play-button").click(function() {
$(this).toggleClass("fa-play fa-pause");
});
});

} catch (error) {
// This will throw the error to the parent window.
throw error;
}
</script>

<style>
/* App CSS Goes Here */
body {
background-color: #f5f5f5;
}

.play-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

.play-button {
font-size: 60px;
color: #ff0000;
cursor: pointer;
transition: color 0.3s;
}

.play-button:hover {
color: #ff4500;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<div class="play-container">
<i id="play-button" class="fa fa-play play-button"></i>
</div>
</div>
</body>
</html>