rocknbil - 4:24 pm on Oct 10, 2011 (gmt 0)

All of these are essentially "hacks" to convince various browsers to play along and will always be a pain. This is easily solved with SWFObject.

1. Download SWFObject [code.google.com] For the sake of demonstration, we'll put it in a directory, "JS."

2. Add it to the head of the document. We'll create the file "video.js" shortly.

<script type="text/javascript" src="/js/swfobject.js"></script>
<script type="text/javascript" src="/js/video.js"></script>

3. Create a "player" element. It's best to load this player element with alternate content, like a screen capture of the video. If Javascript is enabled, doesn't matter, it will be replaced. Make the object the size of your video.

<p id="my-player">See the video here</p>

CSS so you can see what's up:

#my-player {
display: block;
margin:0;
padding:0;
height: 275px;
width: 445px;
text-indent:-50000px;
outline:none;
border: none;
background:url(/images/screen-capture.jpg) top left no-repeat;
}

(The text-indent property, in combination with outline: none; allows me to use a plain text content for S.E.'s and optionally the container can be an anchor. This is NOT considered black hat hidden text.)

4. The contents of video.js:

window.onload=function() { loadVideo(); }; 
// 
function loadVideo() { 
 if (document.getElementById('my-player')) { 
 var params = { allowScriptAccess: "always" }; 
 var atts = { id: "myytplayer" }; 
 // Put the following on ONE LINE 
 swfobject.embedSWF("http://www.youtube.com/e/YOUR VIDEO ID HERE?enablejsapi=1&playerapiid=ytplayer", 
 "my-player", "445", "250", "8", null, null, params, atts); 
} 
} 
function onYouTubePlayerReady(playerId) { 
ytplayer = document.getElementById("myytplayer"); 
if (ytplayer) { ytplayer.playVideo(); } 
}