Video in background

Hello
Im curious if background can be replaced by video? Did You play video "on grill" lately?

Hello,

This article should be helpful:
https://www.gavick.com/blog/make-video- ... background

Hi Piotr,

seems that discussing with this "disqus" extension is not working on https://www.gavick.com/blog/make-video- ... background ... my posts are gone ... so i ask here for your service. Thanks in advance Piotr!

As mentioned, i followed your Video Background instructions and i implemented this into customers website - wow! With this little workaround the website is looking much more awesome ... so everyone is getting hungry on steaks now ...

http://asados.at/?lang=en

I followed your instructions exactly .. also the "mobile device" workaround ... but on mobile devices i cant see the background image. As you can see in the screenshot here: http://ge.tt/3yavay92/v/0?c the line to load the image is "outlined" ...

Secondly: In Firefoy everything is fine ... on IE (latest Version) there is a grey banner under the vid .. (Screenshot: http://ge.tt/8GZbwy92/v/0?c) In Chrome this grey Line is much more smaller in FF everything is OK ...

How to opimize this and the responsive View? FROM MY POINT OF VIEW THE VIDEOFEATURE SHOULD BE ADDED TO THE THEME!!

Great work!!

Hi,

Regarding the backgorund on mobile devices, you have inline background with empty url in your #gk-header.
Please upload your image header in Appearance -> Customization, or add the following code (inside max-width: 700px media query):

Code: Select all

#gk-header {
  background-image: url(http://asados.at/wp-content/uploads/video720.jpg)!important;
  background-size: cover!important;
}


Regarding the grey spaces - it's not easy to adjust responsive background videos, probably I'll continue this subject in my future posts on the blog.

Hi - thanks a lot! Works fine now! Any chance to have this as a feature in upcoming Steakhouse Updates?

All the best!

Jörg

We'll consider it, thank you for the suggestion.

Hi again,

to force Video BG implementation i found 2 issues (in CHROME only): The Background image behind "!Special" and "gknsp article_wrapper" (both on "home" are something like "flippin" and wrapping around. Seems also that Firefox is displaying everything perfect! Is there a Solution to stop Video playback after loosing its focus?

something like this?

window.addEventListener('blur', function() {
document.title = 'not focused';
});

kind regards Joerg

Hello,

I'm sorry for the delay, yes I can see this problem but it's some kind of rendering problem by the Chrome browser, I'll try to inspect the issue and maybe I'll find a solution.