I am adding youtube video to a companies website and would like them to display on non-flash devices. I have been playing with the youtube iframe API and updated one of their examples to allow a user to click on a link to change the video in the iframe. The edited code is:
<!DOCTYPE HTML><html><body><div id="player"></div><script>var tag = document.createElement('script');tag.src = "http://www.youtube.com/player_api";var firstScriptTag = document.getElementsByTagName('script')[0];firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);var done = false;var player;function onYouTubePlayerAPIReady() { player = new YT.Player('player', { height: '390', width: '640', videoId: 'JW5meKfy3fY', events: {'onReady': onPlayerReady,'onStateChange': onPlayerStateChange } });}function onPlayerReady(evt) { evt.target.playVideo();}function onPlayerStateChange(evt) { if (evt.data == YT.PlayerState.PLAYING && !done) { setTimeout(stopVideo, 6000); done = true; }}function stopVideo() { player.stopVideo();}function loadVideo(videoID) { if(player) { player.loadVideoById(videoID); }}</script><a href="javascript:loadVideo('kGIjetX6TBk');">Click me to change video</a></body></html>The only thing I added was:
function loadVideo(videoID) { if(player) { player.loadVideoById(videoID); }}This works fine in Safari, Chrome and Firefox but does not work in IE7, 8 or 9. In IE7 and 8 it returns an error "Object does not support this property or method".
Is this an issue with the API or am I doing something wrong?