Plaats een div (met het id "player") ergens in de body-sectie van jouw pagina, en geef het javascript, wat hieronder staat, ook een plaatsje (zo laag als mogelijk) tussen de body-tags. Op de plaats waar je <div id="player"></div> hebt geplaatst, behoort het youtube filmpje te gaan "spelen". Zélfs déze code (van youtube) is foutloos gemaakt volgens de JSLint-norm ☺
Als je het gewenste youtube-filmpje hebt gevonden, wat je op de pagina wilt laten zien, hoef je alléén maar het id bij: videoId: in te voeren (van het desbetreffende filmpje). Dat je de afmetingen e.d. ook kan wijzigen spreekt natuurlijk voor zich zelf. Vergeet niet om jouw pagina-type HTML5 te laten zijn. Anders zou je wel eens wat rare problemen kunnen krijgen.
<script>
/*global document: false */
/*global setTimeout: false */
/*global window: false */
var klaar, player, YT;
function start_de_youtube_player() {
var de_tag = document.createElement('script');
de_tag.src = "http://www.youtube.com/player_api";
var eerste_script_tag = document.getElementsByTagName('script')[0];
eerste_script_tag.parentNode.insertBefore(de_tag, eerste_script_tag);
klaar = false;
}
function onPlayerReady(evt) {
evt.target.playVideo();
}
function stopVideo() {
player.stopVideo();
}
function onPlayerStateChange(evt) {
if (evt.data === YT.PlayerState.PLAYING && !klaar) {
setTimeout(stopVideo, 6000);
klaar = true;
}
}
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: '_c-NMnYhM3Q',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
window.onload = start_de_youtube_player;
</script>