I'm trying to embed a YouTube video on to one of our customer's websites and it needs to be able to show an image when it has finished playing. I figured the easiest way to do this would be to remove the containing div so an underlying image would be displayed.. but, I'm having a little difficulty. I have little knowledge of JavaScript and the chaps I'd normally hand this work over to are not available right now.
The problem I'm having is that the containing div is not being removed. After playback has finished, the player just displays a list of related videos - not magically disappearing!
Can anyone advise on the code I have written so far?
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script><div id="ytapiplayer"> You need Flash player 8+ and JavaScript enabled to view this video.</div><script type="text/javascript">var params = { allowScriptAccess: "always" };var atts = { id: "myytplayer" };swfobject.embedSWF("http://www.youtube.com/v/VIDEO-ID?enablejsapi=1&playerapiid=ytplayer&version=3&autoplay=1&controls=0&modestbranding=1&showinfo=0&autohide=1","ytapiplayer", "621", "244", "8", null, null, params, atts);// listenfunction onYouTubePlayerReady(playerId) { var ytplayer = getElementById("myytplayer"); ytplayer.addEventListener("onStateChange", "onytplayerStateChange");}// closediv function onytplayerStateChange(newState) { if (newState === 0){ $('ytapiplayer').remove(); }}</script>
