Jump to content
Sign in to follow this  
davidzatzcom

Fix to stop features from rotating once YouTube hit to play

Recommended Posts

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'); } }

Share this post


Link to post
Share on other sites
seanriceaz
if you're doing this in a child theme, you can include it there like so: in your functions.php file, add this:

Share this post


Link to post
Share on other sites
Danny
Thanks Sean.

Please search our forums, before posting!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×