sandwichesandapples

I was hired recently (does it count as being hired if you’re never paid?) to troubleshoot a bug with videos not appearing in Firefox. The situation was this: a client was using the hack described by Justin Tadlock here to add YouTube videos to the sidebar of his WordPress blog. The hack uses WordPress’s “custom field” to create a video category and display the video in the sidebar with a smaller than standard width.

The hack makes including video very simple. You make a custom field called “Video” and drop in the YouTube URL, not the embed code. Justin’s hack then queries the WP database for Video entries and then writes valid XHTML to display the YouTube embed:

<div class=”v<?php echo $i; ?> video”>
<?php
// Check to see if custom field “Video” is set and if it has anything in the “Value” field.
if(isset($video[0]) && strcmp($video[0],”)!= 0) {

// Display valid XHTML player for YouTube, Google, MetaCafe, and other video sites
// “echo $video[0];” displays the first item in the array for the custom field “Video”
?>

<object type=”application/x-shockwave-flash” data=”<?php echo $video[0]; ?>” style=”width: 290px; height: 242px; border: none; padding: 0; margin: 0;” id=”video-block-<?php echo $i; ?>”>
<param name=”movie” value=”<?php echo $video[0]; ?>” />
<param name=’wmode’ value=’transparent’ />
<param name=”quality” value=”best” />
<param name=”bgcolor” value=”transparent” />
<param name=”FlashVars” value=”playerMode=embedded” />
</object>

<?php
} // endif

// If there is no Value for the custom field Key “Video”
else {

// echo error checking to check custom field errors
echo ‘Did not add a video URL to the custom field <strong> Key</strong> of “Video”‘;
echo ‘<!– This user did not add the video URL to the correct custom field –>’;

} // endelse
?>
</div> <!– video –>
<?php endwhile; ?>

Then he styles the output:

.video {
display: block;
float: left;
overflow: hidden;
width: 288px;
margin: 0 0 10px 0;
padding: 2px 5px 10px 5px;
text-align: center;
}
.video div {
overflow: hidden;
margin: 0 auto;
padding: 0;
text-align: center;
display: block;
}
object { padding: 0; margin: 0; }

The goofy thing was that the YouTube embeds appeared fine in IE but not in Firefox. After some troubleshooting, I fixed the problem and reported to my client:

You should be good to go. This is a very weird case of code standards failing in Firefox. Although surely that can’t be the case. I’m blaming YouTube officially.

To fix it, I stripped the code that Justin did which was the acceptable structure and replaced it with the good old dumb youtube suggested embed. Here’s the section of code. You only need the bit between the <object> tags. Delete the entire <object> section that Justin used in his template.

<h3>On Video</h3>
<div class=”v<?php echo $i; ?> video”>
<?php
// Check to see if custom field “Video” is set and if it has
anything in the “Value” field.
if(isset($video[0]) && strcmp($video[0],”)!= 0) {
// Display valid XHTML player for YouTube, Google, MetaCafe, and
other video sites
// “echo $video[0];” displays the first item in the array for the
custom field “Video”
?>

<object width=”222″ height=”186″><param name=”movie”
value=”<?php echo $video[0]; ?>”></param><param name=”wmode”
value=”transparent”></param><embed src=”<?php echo $video[0]; ?>”
type=”application/x-shockwave-flash” wmode=”transparent” width=”222″
height=”186″></embed></object>

I’ve since heard from one other source that YouTube embeds are glitchy in Firefox. I don’t have any first-hand experience with this since I watch YouTube video embeds every single day in Firefox. But if anyone’s got info in this phenomenon, I’d be interested to hear it.

I have noticed that the add-on AdBlock Plus sometimes makes Flash video invisible to me until I scroll up enough to move their “block” tab off the screen. But this is a bug with AdBlock Plus not Firefox. I can always disable ABP to view all Flash with no problems.