<!DOCTYPE html>
<html id="backgroundcolor">
<head>
<title>Funny Site</title>
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
</head>
<body>
<h1>Funny Site</h1>
<div class="container">
<iframe id = "videos" width="100%" height="450" src="https://www.youtube.com/embed/videoseries?list=PLvKo-7UxiUK5RuhJdbF0mqN1aqPdY6heZ" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
<div class="random">
<input type="button" class="randomShape" value="Random" onclick= "randomVideo();">
</div>
<div class="back">
<input type="button" class="backShape" value="Back" onclick="backVideo();">
</div>
<div class="next">
<input type="button" class="nextShape" value="Next" onclick="nextVideo();">
</div>
<div id="lH">
<audio controls volume="0.2" id="aH">
<source src="http://www.w3schools.com/html/horse.ogg" type="audio/ogg">
</audio>
</div>
<center>
<marquee>
<img src="https://clipart.info/images/ccovers/152285254142-cat-png-image-download-picture-kitten.png" width="100" height="100" vspace="0" class="cat" onClick="document.getElementById('aH').play()">
</marquee>
</center>
</body>
</html>