Customize the YouTube Player
Add the html, the video id and to end of body the javascript file, play!
Add the minifyed css file and style it as you like.
<html>
<head>
...
<link href="css/styt.css" rel="stylesheet" type="text/css" />
...
</head>
<body>
...Just copy this HTML snippet and add the video id of youtube to the data-v attribute.
As example: https://www.youtube.com/watch?v=ZnjXIeeJIfg = ZnjXIeeJIfg
...
<div class="st-yt">
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="st-yt-player" data-v="ZnjXIeeJIfg"></div>
<ul class="st-yt-control">
<li>
<div class="st-yt-control__play">Play</div>
</li>
<li>
<div class="st-yt-control__stop">Stop</div>
</li>
<li>
<div class="st-yt-control__pause">Pause</div>
</li>
<li>
<div class="st-yt-control__mute">Mute</div>
</li>
<li>
<div class="st-yt-control__unmute">Unmute</div>
</li>
</ul>
</div>
...And add the minifyed javascript file.
...
<script src="js/styt.js" type="text/javascript"></script>
...
</body>
</html>Based on YouTube demo.js
Manipulate with the Player Vars.
yt.js
playerVars: {
"autoplay": 1,
"controls": 0,
"rel": 0,
"theme": "dark",
"enablejsapi": 0,
"modestbranding": 1,
"autohide": 1,
"loop": 1
}Please file an issue if you think something could be improved. Please submit Pull Requests when ever possible.
Samet Tarim - All works