Persistent Music Throughout Forum

by Dr.Intern November 24th 2013, 8:44 am

Link to forum: [url=chaoticbackup.forumotion.com]chaoticbackup.forumotion.com[/url]

To get persistent music throughout the forum, I embedded it into an iframe. I want the users to have the ability to pause and play the music so I added javascript to do so. When I tested it through w3's try it editor, it works fine, but when I implemented the code into the site I - after I press the button and the song (video) starts, I cannot press the pause button.

Here is the page's html:

Code:: <head> <link rel="shortcut icon" type="image/x-icon" href="http://r20.imgfast.net/users/2016/18/35/72/smiles/2877754569.png">  <script> function toggleVideo(state) { // if state == 'hide', hide. Else: show video var div = document.getElementById("popupVid"); var iframe = div.getElementsByTagName("iframe")[0].contentWindow; div.style.display = state == 'hide' ? 'none' : ''; func = state == 'hide' ? 'pauseVideo' : 'playVideo'; iframe.postMessage('{"event":"command","func":"' + func + '","args":""}', '*'); } </script> <style type="text/css"> html, body, div, iframe { margin:0; padding:0; } iframe { position:fixed; display:block; width:100%; border:none; } </style> </head> <body>  <iframe src="http://chaoticbackup.forumotion.com/forum" width="100%" height="100%">Your browser is incompatible. Please visit <a href="chaoticbackup.forumotion.com/forum">here</a> for a compatible site.<a href="http://chaoticbackup.forumotion.com/forum">a compatible version.</a></iframe>  <div style="position:relative;z-index:200;float:right;padding-right: 40px;"> <a href="javascript:;" onClick="toggleVideo();">Music</a>  <div id="popupVid" style="position:absolute;display:none;"> <iframe width="1" height="1" src="http://www.youtube.com/embed/9KAWo_lqpuY?enablejsapi=1&loop=1" frameborder="0" style="visibility:hidden;display:inline;"></iframe> <a href="javascript:;" onClick="toggleVideo('hide');">Pause</a></div> </div> <a href="http://www.forumotion.com" target="_blank" style="display:none">forumotion.com</a> </body>

Additional Request:
It would be nice if pausing/playing the music button could be done with a single image (or changing between pause/play images) instead of two words.

by Festina Lente November 24th 2013, 9:09 am

Why don't you try SCM Player? Members have an option to pause/play music.

http://scmplayer.net/

by Dr.Intern November 25th 2013, 1:43 am

Well I visited the site today and the code works fine. I'm wondering if it is possible to have it solely in javascript so I don't have to wrap the site in an Iframe.

Festina, thanks for the suggestion. I'll remember it for future reference. Is it also possible to get it in a javascript only format?

PS.
Still interested in the additional request.