Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Brendon Bauer

macrumors 6502
Original poster
May 14, 2007
344
0
Good 'ol USofA
Ok, I'll start from the beginning:

I am the web guy for my church website and we use Wordpress to power our sermon video podcasts. Each week we upload the sermons to blip.tv and use those links (to flash versions) to power it. In wordpress I call the .flv file from blip.tv using a link that calls for an external javascript file to pop up the sermon in a new window. You can test out the video here: http://www.summitnorthwest.org/sermonvideo/ So here's the code (taken from the most recent post--9/20/08):

In wordpress, here is the link to click on:
Code:
<a href="http://blip.tv/file/get/Summitnorthwest-RonAndNancyRocky699.flv" onclick="javascript:flvplayer(this.href,'1'); return false;" target="_blank">Play Video</a>

Here is the code between the head tags that calls the js file:
Code:
<script src="http://www.summitnorthwest.org/sermons/flvplayer.js" type="text/javascript"></script>

Here is the external js file:
Code:
function flvplayer(filepath,WindowNumber) 
{
    PlayerWin = window.open('',WindowNumber,'width=350,height=315,top=75,left=75,screenX=75,screenY=75,resizable=1,scrollbars=0,titlebar=0,toolbar=0,menubar=0,status=0,directories=0');

    PlayerWin.focus();
    PlayerWin.document.writeln("<html><head><title>Video Sermon Player</title></head>");
    PlayerWin.document.writeln("<body bgcolor='#000000'>");
    PlayerWin.document.writeln("<div align='center'><table border='0' width='100%' height='90%'><tr><td>");
    PlayerWin.document.writeln("<embed src='http://www.summitnorthwest.org/sermons/mediaplayer/player.swf' width='100%' height='100%' allowscriptaccess='always' allowfullscreen='true' flashvars='file=" + filepath + "&autostart=true&fullscreen=true&skin=http://www.summitnorthwest.org/sermons/mediaplayer/nacht_skin.swf' />");
    PlayerWin.document.writeln("</td></tr></table></div>");
    PlayerWin.document.writeln("<form><div align='center'><input type='button' value='Close this window' onclick='javascript:window.close();'></div></form>");
    PlayerWin.document.writeln("</body></html>");

    PlayerWin.document.close();
}

Now here is the problem... When clicking "Play Video" in Firefox, the new window pops up nicely and opens the sermon in a flash player. The flash player/video is maximized inside the div tag so you can resize the window and in turn the video resizes with it. This works great in Firefox. However, in Safari the video shows up somewhere around 175x135 and doesn't resize at all when you resize the window.

Any ideas why?
 
No idea? Here are some screenshots for those of you who can't test it. The one that looks normal is in Firefox and the one where the video is tiny is Safari. I assume it's a gecko vs webkit issue because Google Chrome renders it in the same way Safari does: messed up.
 

Attachments

  • Screenshot 1.jpg
    Screenshot 1.jpg
    41 KB · Views: 125
  • Screenshot 2.jpg
    Screenshot 2.jpg
    27.4 KB · Views: 141
Changing the table width and height from 100% and 90% to a pixel value like 330 and 260 fixes the issue in Safari (webkit), but it's not the end solution because the purpose of the % is to allow you to resize the window and have the video resize with it. By setting a pixel value for the height and width you stop the video from resizing... It's stuck at that value. What causes the video to be super tiny when you set the table width/height to a percentage value, and inside of that you set the embed width/height to a percentage value? And is there any workaround?

Thanks for your help!

Also, I looked into that SWFObject thing, but I'm not really sure how to set that up. I glanced through the documentation, but I don't have much experience in swf/js stuff.
 
Figured it out... Apparently if I just remove the table completely and instead reduce the embed size to around 95% by 90%, I get the same effect. I'm not sure why I had the table there in the first place. For some reason I thought I needed it. It's now working great in Safari (webkit) and Firefox (gecko).
 
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.