[JoshuaParticipant]

Hello guys,

I have two questions for a project I am working on.

WordPress 4.3.1
X Theme 4.1.1
Using X Child Theme
Pages built in Cornerstone

First question is in regards to the Video background options in Cornerstone.

On the page:

http://raremedia.tv/temp-page

I have a video background that is suppose to fill the entire page. On Google Chrome this loads perfectly! However, on Firefox, it loads the video in a small box and does not stretch the video to fill the website dimensions. On Safari it does not load at all… I have no idea how it looks on Internet explorer.

My question is, how do I get this video to load to the correct size on Firefox? And how do I get it to work on Safari? If I cannot get it to work on Safari, can I get it to load something else instead? The video background is a “WebSD.Webm” file type.

My next question is in regards to the color gradient I have applied to my h1, h2, h3, and h4. This is a webkit based CSS trick that applies a gradient to the text. Looks wonderful on Chrome and Safari, but does not load in Firefox. Below is the code:

h1, h2, h3, h4 {
font-size: 72px;
  background: -webkit-linear-gradient(left, #72DDFD, #074A7E);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Is there a way to get this code to work in non webkit browsers? If not, how can I get non-webkit browser to load a different font color without preventing this effect from working on Chrome and Safari?

Thank you so much for your help. This support team is one of the main reasons I continue to buy Theme X!

-Joshua

[RadModerator]

Hi there,

Thanks for writing in.

As for the video, please use MP4 format ( http://www.w3schools.com/html/html5_video.asp – HTML Video – Browser Support )

Then add this css to fix video size for firefox.

.x-section.bg-video {
    width: 100%;
}

Not sure why, but it’s only specific to your site. Video size works okay on my own installation without adding any css like above.

About the gradient, please use this tool http://www.colorzilla.com/gradient-editor/. Each browser has their own standard for implementing their gradient effect.

Thanks!

[JoshuaParticipant]

Once again, I appreciate the support!

Didn’t realize Webm wasn’t supported across browsers. Also that gradient editor was very helpful, although it appears that it is really only Webkit browsers that support true color gradient text.

Finally it is strange that my site is having that issue, but once I added your css it is working almost perfectly. The only thing I am still noticing is that when I load the site in firefox, the navbar is a grey color until I scroll the page. It other words it is loading with full opacity and not becoming transparent until I scroll.

Any ideas what may be causing this?

You guys rock!

[JadeModerator]

Hi there,

I have checked on a Firefox browser and same thing happens on Google Chrome where the Navigation bar background looks gray until the video loads up. As the page loads the nav bar background is already set to have the transparency but it appears gray like because it overlays the area of the page that has a white background color resulting it to look like a solid gray.

Hope this explains it.

[Author]

Posts