19 replies to this topic

[seanriceaz]

I figured out an answer to this. it's (mostly) javascript:
Depends on jQuery and SWFobject (both are included in wordpress). You'll have to figure out how to get them referenced. You should be able to copy/paste this into any installation and it should work out of the box. Basically, it takes your youtube video embed (or actually, you could just drop a youtube video URL in there), converts it to a flash version (need to do this to attach to the video events) and automagically resizes it to fit your feature area. Enjoy!

code is below:

jQuery(function(){
//Grab Youtube videos and convert them to SWFobject objects
//load video ids into an array
var videos = new Array();
var count = 0;
var thisHTML = '';
jQuery('.fmedia .dcol-pad').each(function(){
thisHTML = jQuery(this).html();
if(thisHTML.match('http://(www.)?youtube|youtu.be')){
videos[count]={id:thisHTML.split(/v/|v=|youtu.be//)[1].split(/[?&]/)[0],
width: jQuery(this).closest('.fcontainer').innerWidth(),
height: jQuery(this).closest('.fmedia').innerHeight()};
jQuery(this).replaceWith('

');

count++;

}
});

//Set up actual SWFObjects for each video
var params = {allowfullscreen: 'true', allowscriptaccess: 'always', wmode: 'opaque'};
for (var i = 0; i < videos.length; i++) {
var id = 'video' + i;
var flashvars = {enablejsapi: '1', playerapiid: id};
swfobject.embedSWF('http://www.youtube.com/v/' + videos[i].id, id, videos[i].width, videos[i].height, '9.0.0', false, flashvars, params);

}
});

//Handle youtube events

function handlePlayerStateChange (state) {
switch (state) {
case 1:
case 3:
// Video has begun playing/buffering
jQuery('#cycle').cycle('pause');
jQuery('.playpause').removeClass('pause').addClass('resume');
break;
case 2:
case 0:
// Video has been paused/ended
jQuery('#cycle').cycle('resume');
jQuery('.playpause').removeClass('resume').addClass('pause');
break;
}
}

function onYouTubePlayerReady(id){
var player = jQuery('#' + id)[0];
if (player.addEventListener) {
player.addEventListener('onStateChange', 'handlePlayerStateChange');
}
else {
player.attachEvent('onStateChange', 'handlePlayerStateChange');
}
}

[seanriceaz]

if you're doing this in a child theme, you can include it there like so: in your functions.php file, add this:

[Danny]

Thanks Sean.