vimeo embed showing black screen on firefox?

Question

I embed videos into my web site, works great in all browsers but on firefox shows up a black screen, any idea? Using the iframe mode. Funniest thing is that some show up and some don't using the same embed method for all.

Answer 1

rob.m - yup, showing and hiding vimeo videos will cause that random black screen to appear. I JUST ran into this on a project, and tore my hair out for the better part of a day figuring out why.

If you NEED to show/hide videos, and you NEED the black screen to not show up, you will have to use the old school flash embed. That will work.

It's a trade off - consistent embed images = flash OR inconsistent embed images = universal method (read: HTML5 w/ flash fallback).

[Brief rant: the Vimeo API documentation leaves a LOT to be desired]

If you need to further interact with these videos that you show/hide, and plan to use the Vimeo API to do so, I found that I had to use the SWFobjects library method. See this forum post for more: http://vimeo.com/forums/topic:44521 - specifically, the second to last post.

Answer 2

Eventually i came up with using this:

In the main page I have a element which i then populate and replace with the iframe. Thanks

Main page:

<span class="video clearfix" data-vimeoid="<?php echo the_field('vimeo') ?>"></span>

Content page to be loaded:

var url = this.href + " .content";
var videoSpan = infoBox.find("span.video");
var iframe = $('<iframe/>', {

        'frameborder' : 0,

        'width' : '692',

        'height' : '389',

        'src' : 'http://player.vimeo.com/video/'+ videoSpan.data("vimeoid") +'?autoplay=0&api=1'

});

videoSpan.replaceWith(iframe);