• 0
Sign in to follow this  
Followers 0

Fix to stop features from rotating once YouTube hit to play

Question

  • 0

Posted · Report post

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

2 answers to this question

  • 0

Posted · Report post

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
  • 0

Posted · Report post

Thanks Sean.

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  
Followers 0