Position video background

Hi,
how should I set the template (version restaurant) to show the background video, instead of the bottom 3 position in the header position?
Best Regards.

Hi

All You need to do is to use a HTML code like that:

Code: Select all

<div class="gk-border-box" data-sr="enter bottom and move 100px and scale up 15% over .8s"><sup>Come and enjoy</sup>
<h2>Book a table</h2>
<span class="gk-phone-number"> <sup>Monday - Sunday 10AM : 10PM</sup> <strong>+66 233459876</strong> </span> <span class="gk-reservation-button"> <sup>or use the form</sup> <a class="btn" href="index.php/booking" data-sr="enter bottom and move 20px and wait .4s">Make reservation</a> </span> <small>Your reservation will be kept for 30 minutes from your booking time after that space will be released.</small></div>
<p><video poster="images/demo/restaurant-style/bg.jpg" autoplay="autoplay" loop="loop" muted="">
<source src="images/demo/restaurant-style/bg.mp4" type="video/mp4" />
<source src="images/demo/restaurant-style/bg.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video></p>


template will move video to background.

Hi

All You need to do is to use a HTML code like that:

Code: Select all

<div class="gk-border-box" data-sr="enter bottom and move 100px and scale up 15% over .8s"><sup>Come and enjoy</sup>
<h2>Book a table</h2>
<span class="gk-phone-number"> <sup>Monday - Sunday 10AM : 10PM</sup> <strong>+66 233459876</strong> </span> <span class="gk-reservation-button"> <sup>or use the form</sup> <a class="btn" href="index.php/booking" data-sr="enter bottom and move 20px and wait .4s">Make reservation</a> </span> <small>Your reservation will be kept for 30 minutes from your booking time after that space will be released.</small></div>
<p><video poster="images/demo/restaurant-style/bg.jpg" autoplay="autoplay" loop="loop" muted="">
<source src="images/demo/restaurant-style/bg.mp4" type="video/mp4" />
<source src="images/demo/restaurant-style/bg.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video></p>


template will move video to background.

Hi,
In fact it is the same code that I used, I also added the suffix dellla class module: video-bg in the advanced options.
See attachments:

capure1.png

capure2.png

Could you please provide me with a URL to your website, either here or via PM (click the “Private Message” text underneath my avatar) so that I may analyze it? It is a lot easier for us to diagnose issues when we have a live site to examine.

Hi,

i've similar problem - is there any working solution?

What worked for me:

!\CSS

Code: Select all

video#bgvid {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background: url(sciezka/nazwa.jpg) no-repeat;
    background-size: cover;
}

!\html

Code: Select all

<video autoplay loop poster="sciezka/nazwa.jpg" id="bgvid">
    <source src="sciezka/video.webm" type="video/webm">

  Your browser does not support the video tag.
</video>

Hi

I still haven't got an url to be able to see and provide any code, but this looks to be in order, so please try it and if this will not work as expected please get back to me with an url.