Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Center area post/pages »

Video background color incorrect in Chrome & Safari. Css problem?


  #1  
Old Jan 29, 2013, 12:21 PM
NetMonkey's Avatar
NetMonkey
 
23 posts · Oct 2011
Little Rock, AR
Hello all,

I'm working in a local WordPress dev environment running Windows 7 32-bit and WAMP and I'm using Atahualpa 3.7.10. I've run into a quirky styling problem that's browser based. I created a 1.5 minute Flash animation, exported to swf, then encoded to ogg, mp4, and webm so I could be cross-browser compatible. My encoding went fine.

I've coded video to run in a page using this:

<div align="center"><video width="640" height="520" poster="http://localhost/tlnnow/video/program-overview.png" controls="controls" preload="none">
<!-- MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 -->
<source type="video/mp4" src="http://localhost/tlnnow/video/program-overview.mp4" />
<!-- WebM/VP8 for Firefox4, Opera, and Chrome -->
<source type="video/webm" src="http://localhost/tlnnow/video/program-overview.webm" />
<!-- Ogg/Vorbis for older Firefox and Opera versions -->
<source type="video/ogg" src="http://localhost/tlnnow/video/program-overview.ogv" />
<track kind="chapters" src="chapters.srt" srclang="en" />
<!-- Flash fallback for non-HTML5 browsers without JavaScript -->
<object width="640" height="520" type="application/x-shockwave-flash" data="http://localhost/tlnnow/video/program-overview.swf">
<param name="movie" value="http://localhost/tlnnow/video/program-overview.swf" />
<param name="flashvars" value="controls=true&file=program-overview.mp4" />
</object>
</video></div>

The video loads as expected and renders fine in FireFox 19 and Opera 1212, I'm still trying to overcome a problem loading in IE 9 (needing the correct code to force IE9 into quirks mode), but the two browsers that are creating the biggest problem are Safari 5.17 and Chrome 24.

In Safari 5.17 and Chrome 24 the video appears and plays, but in both browsers it shows a (gray) background, not white as expected.

I opened Chrome's developer's tools and started digging. I found that there are numerous DOM specifications under - style: CSSStyleDeclaration that appear to be able to correct my problem.

I said all of that, to ask this. How/where can I set some of the css styling so Safari 5.17 and Chrome 24 see it and make use of it, but so it doesn't effect rendering in FireFox 19 and Opera 1212?

Do I need to code the page to do a browser check and do x if Safari 5.17 and Chrome 24?

I feel I'm almost there in nailing this one. Any input would be "greatly appreciated".

Barry

Bookmarks



Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] Post-image display problem in safari, chrome wobcradio Center area post/pages 3 Jan 28, 2011 11:37 PM
Works with Chrome, Firefox, Safari but not IE Patty Center area post/pages 4 Jan 28, 2011 08:47 AM
[SOLVED] Problem with Page Menu Bar in Safari &amp; Chrome seaside Page & Category Menu Bars 3 Mar 30, 2010 06:29 AM


All times are GMT -6. The time now is 11:38 AM.


Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.