(solved) Video in Colorbox not showing in Firefox

• vmedia

  said

  Strange thing (maybe it’s just me) but when viewing a video through colorbox/lightbox it stays black. Pressing plays the video but it’s not visible. Only in Firefox (on my site but also on the demo site). Cleared my cache e.d. but still the same.

• Trevor

  said

  This is a very strange issue indeed. I’ve spent the last two hours trying to come up with a simple fix but have admittedly come up empty-handed. I will continue to look into this and hopefully find a solution for you very soon.

  EDIT: temporary solution posted below.

• vmedia

  said

  Thanks Trevor, so it’s not only me that has this issue?

• andy

  said

  It looks like a new version of ColorBox was released 2 days ago. Try the demo and see if you get the same problem. The video samples are under “Other Content Types” at the bottom left:

  http://jacklmoore.com/colorbox/example1/

  If it works, you can download and replace the JS in the theme with the new one. I didn’t see anything specific stating that this issue was known or fixed. It could always be a CSS styling issue as Trevor mentioned but we’ll figure it out.

  Thanks.

• Trevor

  said

  The updated JS file for colorbox did not resolve the issue – it looks to be purely CSS related.

  From what I can tell the conflict is with some of the -webkit properties in colorbox.css

  I have created an updated CSS file that retains most of the original styling while allowing for videos to be properly displayed in Firefox(from my testing anyway). This shouldn’t be considered a permanent fix but if you would like to test it out please feel free to and be sure to update this topic with your findings.

  Here’s what to do:

  1.) Right-click and save-as the following file:
  http://para.llel.us/support/wp-content/uploads/2011/10/colorbox.css

  2.) Using your FTP program of choice, connect to your website(root of Wordpress install) and navigate to the following directory: /wp-content/themes/parallelus-salutation/assets/css

  3.) Temporarily re-name the existing file ‘colorbox.css’ to ‘orig-colorbox.css’

  4.) In the same directory, upload the new ‘colorbox.css’ that you downloaded in step 1.

  If you have questions or need further assistance please let us know. I will work with Andy to implement a better/more permanent fix to include in the next theme update.