Devi sfruttare le api di youtube per spegnere o mettere in pausa il player jquery che fa funzionare la musica di sottodofondo del sito.
Comincia con inserire questo nell'head del sito:
codice HTML:
<script src = "http://www.youtube.com/player_api"></script>
<script type="text/javascript" src="Scripts/jquery.jplayer.min.js"></script>
<script type="text/javascript" src="Scripts/jquery.jplayer.inspector.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
mp3: "http://www.XXXXXX.XXX/music.mp3"
}).jPlayer("play");
},
ended: function (event) {
$(this).jPlayer("play");
},
swfPath: "../Scripts",
supplied: "mp3"
});
$("#jplayer_inspector").jPlayerInspector({jPlayer:$("#jquery_jplayer_1")});
});
//]]>
</script>
Poi metti i pulsanti on/off per la musica, così:
codice HTML:
<div id="jquery_jplayer_1" style="position:absolute; left:-9999px;"></div>
<div style="float:right; margin-top:-10px" id="jp_interface_1">
<a href="#" class="jp-play">Play</a>
<a href="#" class="jp-pause">Pause</a>
</div>
Infine inserisci il video youtube così:
codice HTML:
<div id="videoYouTube">
<iframe id="player" width="419" height="315" style="margin-top:52px"src="http://www.youtube.com/embed/YYYYYY" onload="floaded()" frameborder="0" allowfullscreen></iframe>
</div>
<script>
//onYouTubePlayerAPIReady
var player;
function floaded(){
player = new YT.Player('player', {
videoId: '-0W4g6tExM0',
events:
{
'onStateChange': function (event)
{
if (event.data == YT.PlayerState.PLAYING) {
$("#jquery_jplayer_1").jPlayer("pause");
}
}
}
});
}
</script>
Ovviamente devi correggere dove ho messo XXXXXX.XXX con il nome del sito, e YYYYYY con il codice corretto del video youtube, ed il gioco è fatto.
