Er is geen CSS ondersteuning.
Als je een filmpje van youtube op jouw website wilt tonen kan je een (geldig html5) iframe met een "src" van youtube op jouw pagina plaatsen. Het iframe wordt ge-styled door een paar regels CSS en verder is er niet zo veel te vertellen. Ik heb een voorbeeld-pagina op de site gezet en de broncode daarvan spreekt voor zich. Hieronder staat de style-sheet die je in de head van jouw pagina plaatst:
<style type="text/css" media="screen">
iframe{
overflow:hidden;
width:640px;
height:640px;
border:0}
#youtube{
margin-left:100px;
display:block;
height:510px;
width:640px;
overflow:hidden;}
#masker{
display:blok;
position:relative;
top:-650px;
font-size:2em;
font-weight:bold;
width:640px;
height:126px;
background:#020;
color:#700;
z-index:10}
</style>
en hieronder staan een paar div's en het iframe met wat voorbeeld-code daarin:
<div id="youtube"> <iframe class="youtube-player" seamless="seamless" src="http://www.youtube.com/watch?v=_c-NMnYhM3Q"></iframe> <div id="masker"><br>YOUTUBE</div> </div>
Achter "http://www.youtube.com/" vul je het "id" in van een youtube filpmje.
En dat was dat..
Oh.. en als je niet van Frank Zappa houdt: Het spijt me. Wij zijn er hier gek op.
UPDATE
Youtube heeft de regeltjes wat veranderd: Geen probleem!
Hieronder de werkende versie (geheel goedgekeurd door Youtube zelf).
Geef een videoId (zie script) en alles werkt probleemloos op jouw website.
Niets van de code (css) die hierboven staat heb je meer nodig.
Alleen het onderstaande script wat je ergens in de body van jouw pagina
kan plaatsen. Oh, en vergeet niet om de procedure te starten
met <body onload="beginnen();">.
UPDATE!
Het was niet helemaal duidelijk voor iemand dat je de body-begin-tag
moet vervangen door de "body onload" zoals hierboven staat. Ook weer opgelost..
<div id="player"></div>
<script>
//Laad de player-api asynchroon.
function beginnen() {
var de_tag = document.createElement('script');
de_tag.src = "http://www.youtube.com/player_api";
var eerstescripttag = document.getElementsByTagName('script')[0];
eerstescripttag.parentNode.insertBefore(de_tag, eerstescripttag);
var klaar = false;
var player;
}
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: '_c-NMnYhM3Q',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(evt) {
evt.target.playVideo();
}
function onPlayerStateChange(evt) {
if (evt.data == YT.PlayerState.PLAYING && !klaar) {
setTimeout(stopVideo, 6000);
klaar = true;
}
}
function stopVideo() {
player.stopVideo();
}
</script>
cache 25-01-2011