Oct 6, 2016, 3:22 AM

Want to add just the audio of a YouTube video (without the video!) for a character playlist, soundtrack for a log, or general ambiance?

Here's a step-by-step of how to add this code to a wikidot wiki (sorry, MediaWiki folks, but I'm sure this code can also be adapted for that codebase!).

  1. Create a page that will be where you store the raw source code (here's mine: http://ablusandbox.wikidot.com/musicplayer)
  2. On this page, copy and paste the code provided:
[[html]]
<style type="text/css">.playerbutton{cursor:pointer;border:none;background:transparent;outline:none;display:inline;vertical-align:top;}.gaf210codes_youtubebox,.preload_box{width:1px;height:1px;overflow:hidden;visibility:hidden;position:absolute;display:inline}</style>
<script type="text/javascript" src="http://www.youtube.com/player_api"></script>
<script type="text/javascript">function toggleButtonPlayer_aduVt(buttonobj){buttonobj.style.display="none";if(buttonobj.id=="gaf210codes-aduVt-playbutton"){document.getElementById("gaf210codes-aduVt-pausebutton").style.display="inline";}else{document.getElementById("gaf210codes-aduVt-playbutton").style.display="inline";}}/</script>
<div class="gaf210codes_youtubebox"><iframe width="250" height="250" src="https://www.youtube.com/embed/{$youtubecode}?enablejsapi=1&amp;fs=0&amp;rel=0&amp;showinfo=0&amp;modestbranding=1&amp;iv_load_policy=3&amp;controls=0&amp;autoplay=0&amp;loop=0" onload="gaf210codes_aduVt=new YT.Player(this)"></iframe></div>
<button type="button" class="playerbutton" id="gaf210codes-aduVt-playbutton" onclick="gaf210codes_aduVt.playVideo();toggleButtonPlayer_aduVt(this)"><img src="http://i62.tinypic.com/axnot0.jpg"></button><button type="button" class="playerbutton" id="gaf210codes-aduVt-pausebutton" onclick="gaf210codes_aduVt.pauseVideo();toggleButtonPlayer_aduVt(this)" style="display:none"><img src="http://i57.tinypic.com/2mqugw2.jpg"></button><div class="preload_box"><img src="http://i62.tinypic.com/axnot0.jpg"><img src="http://i57.tinypic.com/2mqugw2.jpg"></div>
[[/html]]
  1. Using the Wikidot "Include" code, you can now attach audio-only music to pages. It will create a mini play/pause button.
[[include musicplayer
|youtubecode=!!This is the alphanumeric code attached to the YouTube video. The best way to find this code is to click 'Share' on the YouTube video's page, and copy and paste the code at the end of the shortlink.!!
]]

Here's an example of the final product: http://ablusandbox.wikidot.com/musicplayerexample

There are ways to change the button graphics, and if anyone wants information on how to do that, I can show you how. Some wiki style guides may be better suited for different color buttons.

Enjoy!