Hitskin.com
by Dr.Intern November 24th 2013, 8:44 amLink 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:
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.
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 for music -->
<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>
<!-- Embed Forum -->
<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>
<!-- Music Button-->
<div style="position:relative;z-index:200;float:right;padding-right: 40px;">
<a href="javascript:;" onClick="toggleVideo();">Music</a>
<!--play linked music -->
<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>
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.
Last edited by Dr.Intern on November 25th 2013, 6:26 am; edited 2 times in total
Facebook
Twitter
Pinterest
Youtube
