Playing YouTube video and YouTube audio using identical HTML but different JS

1. VIDEO
JS (in the head):
<script src="https://www.youtube.com/player_api"></script>
<script src="cleanyoutube.js"></script>
or much better: <script src="cleanyoutube3.js"></script>
or still much better yet: <script src="cleanyoutube4.js"></script>
or still much much better better yet: <script src="cleanyoutube5.js"></script>
ZIE VAN DEZE LAATSTE DE VERSIE MET FULLSCREENKNOP OP http://mesdomaines.nu/eendracht/cleanyoutube_with_fs_button/emyfilm.html. De code is <script src="cleanyoutube5_with_fs_button.js"></script>
of toch nog beter: <script src="cleanyoutube6.js"></script>, demo hier
Voor deze laatste is loading.gif nodig. Voor deze laatste is het misschien mooier om in het script de div met id="video_info" te vervangen door deze div.

Als via cleanyoutube6 het laden van YouTube problemen oplevert, dan vlak boven:
document.getElementById('video_info').onclick=function(e)
het volgende neerzetten om de laadproblemen op te lossen:
/* Forcing a reload of the video for cases where the video won't start by itself. (Only happens with playlists?) */
setTimeout("if(document.getElementById('duration').innerHTML =='00:00:00'){document.getElementById('the_receiver').innerHTML = document.getElementById('the_receiver').innerHTML }",3000)

En alweer beter,met dezelfde loading_gif: <script src="cleanyoutube7.js"></script>

Images:
pausebutton.png
playbutton.png
loading1.gif
youtube_settings.jpg

HTML:
Single videos. Links like:
<a onclick="videosize=0.62; loadVideo('zdphjknR0HU'); info('<div><b>Addinsell<\/b>: <i>Warsaw Concerto<\/i><br>Valentina Lisitsa (piano), BBC Concert Orchestra, Gavin Sutherland <\/div> '); ">Warsaw Concerto. <br>Valentina Lisitsa (piano), BBC Concert Orchestra, Gavin Sutherland.</a>
(The variable videosize specifies the size of the video; default is 0.47; not required. Function loadVideo loads the YouTube video with the given ID. Function info provides info about the video).
 
<a onclick="videosize=0.62; loadVideo('zdphjknR0HU', 20); info('<div><b>Addinsell<\/b>: <i>Warsaw Concerto<\/i><br>Valentina Lisitsa (piano), BBC Concert Orchestra, Gavin Sutherland <\/div> '); ">Warsaw Concerto. <br>Valentina Lisitsa (piano), BBC Concert Orchestra, Gavin Sutherland.</a>
(Same as above, but now the video start at 20 secs from the beginning).
 
<a onclick="videosize=0.62; loadVideo('zdphjknR0HU', null, 480); info('<div><b>Addinsell<\/b>: <i>Warsaw Concerto<\/i><br>Valentina Lisitsa (piano), BBC Concert Orchestra, Gavin Sutherland <\/div> '); ">Warsaw Concerto. <br>Valentina Lisitsa (piano), BBC Concert Orchestra, Gavin Sutherland.</a>
(Same as above, but now the video ends at 8 minutes from the start).
 
<a onclick="videosize=0.62; loadVideo('zdphjknR0HU', 20, 480); info('<div><b>Addinsell<\/b>: <i>Warsaw Concerto<\/i><br>Valentina Lisitsa (piano), BBC Concert Orchestra, Gavin Sutherland <\/div> '); ">Warsaw Concerto. <br>Valentina Lisitsa (piano), BBC Concert Orchestra, Gavin Sutherland.</a>
(Same as above, but now the video starts at 20 secs from the start and ends at 8 minutes from the start).

Playlists. Links like:
<a onclick="videosize=0.62; loadVideo('y05A25Zr01A', null, null, 'QW8BkPVdNbM, f7bSNzRZxU0, W7NXDGFtwUE, t26dr7UbJcA'); info('<div><b>Mahler<\/b>: <i>Symphony No. 1<\/i><br>Michael Halász, Polish National Radio Symph. Orch. <\/div> '); ">Symphony No. 1. <br>Michael Halász, Polish National Radio Symph. Orch.</a>
(The playlist has 5 members).
 
<a onclick="videosize=0.62; loadVideo('y05A25Zr01A', 20, null, 'QW8BkPVdNbM, f7bSNzRZxU0, W7NXDGFtwUE, t26dr7UbJcA'); info('<div><b>Mahler<\/b>: <i>Symphony No. 1<\/i><br>Michael Halász, Polish National Radio Symph. Orch. <\/div> '); ">Symphony No. 1. <br>Michael Halász, Polish National Radio Symph. Orch.</a>
(Same as above, but now the first member of the list starts at 20 secs from the beginning).
 
<a onclick="videosize=0.62; loadVideo('y05A25Zr01A', null, 400, 'QW8BkPVdNbM, f7bSNzRZxU0, W7NXDGFtwUE, t26dr7UbJcA'); info('<div><b>Mahler<\/b>: <i>Symphony No. 1<\/i><br>Michael Halász, Polish National Radio Symph. Orch. <\/div> '); ">Symphony No. 1. <br>Michael Halász, Polish National Radio Symph. Orch.</a>
(Same as above, but now the first member of the list ends at 400 secs from the beginning).
 
<a onclick="videosize=0.62; loadVideo('y05A25Zr01A', 20, 400, 'QW8BkPVdNbM, f7bSNzRZxU0, W7NXDGFtwUE, t26dr7UbJcA'); info('<div><b>Mahler<\/b>: <i>Symphony No. 1<\/i><br>Michael Halász, Polish National Radio Symph. Orch. <\/div> '); ">Symphony No. 1. <br>Michael Halász, Polish National Radio Symph. Orch.</a>
(Same as above, but now the first member of the list starts at 20 secs from the beginning and ends at 400 secs from the beginning).
 
In playlists, the beginning and the end of a video can only be specified for the first member of the list.

2. AUDIO
JS (in the head):
<script src="https://www.youtube.com/player_api"></script>
<script src="cleanyaudio.js"></script>

HTML:
Same as for video (videosize = ... in links will be ignored). So if you have a site with many YouTube video-links and you want them to 'go audio', the only thing you have to do is to replace <script src="cleanyoutube.js"></script> with <script src="cleanyaudio.js"></script>. And if you have a site with many YouTube audio-links and you want them to 'go video', all you have to do is to replace <script src="cleanyaudio.js"></script>. with <script src="cleanyoutube.js"></script> .

IMPORTANT
For some mysterious reason, Chrome on Android requires a dummy href (<a href = "javascript: void(0)"></a>) before the music links in order for the script to run smoothly. A basic HTML woud look like:
<!doctype html>
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>No title</title>

<script src="http://www.youtube.com/player_api"></script>

<!-- Either use cleanyaudio.js or cleanyoutube.js -->
<script src="cleanyaudio.js"></script>
<!--<script src="cleanyoutube.js"></script>-->

</head>

<body>
<!-- top is 65px for the audio version because that's approx. the height of the audio player; adapt to your needs -->
<div style="position: absolute; background: white; color: black; left:0; top: 65px; right:0; bottom:0; overflow: auto; -webkit-overflow-scrolling:touch;">
DUMMY HREF + YOUR MUSIC LINKS HERE
</div>

</body>
</html>


IMAGES
Audio and video use this image:

Video also uses a second image:


EDIT
For the audio script, you may also want to try cleanyaudio2.js. If you use it, make sur to add html, body {-webkit-user-select: none; -webkit-tap-highlight-color: transparent} to the css of your document (and remove it when you use one of the other scripts!).

EDIT II
There is yet another solution for the audio script, try cleanyaudio3.js.