<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Stream player sample</title>
<link href="./style.css" rel="stylesheet" type="text/css" />
<style>
body,
html {
padding: 0;
margin: 0;
font-family: Inter, Roobert, Helvetica Neue, Helvetica, Arial,
sans-serif;
background-color: #18181b;
color: white;
font-size: 10pt;
}
</style>
</head>
<body>
<main>
<section id="player">
<section class="header">
<span id="stream-title">Some stream something here</span>
</section>
<div id="player_id"></div>
<section class="bottom">
<div class="links">
<!-- Change the href to have your twitch handle -->
<a class="button twitch" href="https://www.twitch.tv/yourhandlehere"
>Watch on Twitch</a
>
</div>
</section>
</section>
<!-- Change the src to have your twitch handle and the top level domain where this page is hosted -->
<iframe
src="https://www.twitch.tv/embed/yourhandlehere/chat?darkpopout&parent=your.domain.here"
width="357px"
>
</iframe>
</main>
<script src="./vendor/ovenplayer.js"></script>
<script src="./vendor/hls.min.js"></script>
<script async defer src="./script.js"></script>
</body>
</html>