Ecommerce + The Video Background Reservation

Hi guys!

How to insert module 'The Video Background Reservation' in Ecommerce?

Hi

Here is a css needed for video background:

Code: Select all

.box.video-bg {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 340px 0 !important;
}
.box.video-bg video {
    background: transparent none repeat scroll 0 0;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: auto;
}
.box.video-bg::before {
    background: rgba(0, 0, 0, 0.5) none repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
}
.box.video-bg .gk-border-box {
    border: 2px solid #e78531;
    color: #fff;
    margin: 0 auto;
    padding: 80px 80px 30px;
    position: relative;
    text-align: center;
    width: 630px;
    z-index: 2;
}
.box.video-bg .gk-border-box > sup {
    font-size: 16px;
    text-transform: uppercase;
}
.box.video-bg .gk-border-box > h2 {
    color: #fff;
    font-size: 50px;
    letter-spacing: 4px;
    line-height: 1;
    margin: 0 0 20px;
    text-transform: uppercase;
}
.box.video-bg .gk-border-box > i {
    color: #dd973a;
    display: block;
    font-size: 36px;
    margin: 0 0 30px;
}
.box.video-bg .gk-border-box .gk-phone-number > sup {
    display: block;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.box.video-bg .gk-border-box .gk-phone-number > strong {
    display: block;
    font-size: 30px;
    font-weight: 400;
    letter-spacing: 1.5px;
}
.box.video-bg .gk-border-box .gk-reservation-button {
    display: block;
}
.box.video-bg .gk-border-box .gk-reservation-button > sup {
    display: block;
    font-size: 12px;
    padding: 40px 0 16px;
    text-transform: uppercase;
}
.box.video-bg .gk-border-box .gk-reservation-button > .btn {
    background: #dd973a none repeat scroll 0 0;
    border: medium none;
    border-radius: 1px;
    color: #fff !important;
}
.box.video-bg .gk-border-box .gk-reservation-button > .btn:active, .box.video-bg .gk-border-box .gk-reservation-button > .btn:focus, .box.video-bg .gk-border-box .gk-reservation-button > .btn:hover {
    background: #fff none repeat scroll 0 0;
    color: #dd973a !important;
}
.box.video-bg .gk-border-box > small {
    display: block;
    font-size: 14px;
    line-height: 1.5;
    padding: 65px 0 0;
}


please just make sure html is copied as well.

Video playback is not fullscreen.

My actions:
1. CSS code is copied into the templates \ gk_quark \ css \ template.ecommerce.css;
2. Copied html;
3. And added the suffix CSS-class module: video-bg.

Result in the screenshot:

Hi

Please tell me the url to the page where I'll be able to see it.

Hi teitbite!

I'm doing a site on the local server.
You can see on http://tukzook.hol.es/

Hi

In the code I gave You try lower the padding on first class to:

Code: Select all

.box.video-bg {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 265px 0 !important;
}


What is Your screen size ?

Thanks!
I did padding 257px.
How to fix the width?
The size of my screen 2560х1080px

Hi

I'm afraid I do not have an access to a screen that big. This means I will need to guess how to make it full width. Please try to add this to override.css:

Code: Select all

@media only screen and (min-width:1920px) {
.box.video-bg video {
width: 100%;
}
}


You guessed!
It's not necessary to have a big screen, you can use the zoom in your browser for the experiments.
Now the site looks very good on the big screen, but... at a resolution of at least 700px, ie view the site from the tablet or phone will have a problem.
1. Restaurant theme;
2. Ecommerce theme.

Hi

I think it is removed on purpose since most of the mobile devices doesn't support <video> html5 tag yet, but please tell me the url to the page You wish to work on this black background and I'll try to figure something out.

Hi teitbite!

The desired outcome of the module The Video Background Reservation "Restaurant_quickstart" - http://gkrestaurant.hol.es/

The site with the Ecommerce theme - http://tukzook.hol.es/

1. gk-border-box is not transformed when changing resolution.
2. Place the image instead video on mobile devices.

Hi

Please add this to override.css

Code: Select all

@media only screen and (max-width:665px) {
.box.video-bg .gk-border-box {
    padding: 20px;
    width: auto;
}

.box.video-bg video {
    display: none;
}

.box.video-bg::before {
    background: rgba(0, 0, 0, 0) url("/images/demo/ecommerce/header_bg.jpg") repeat scroll 0 0;
}

.box.video-bg .gk-border-box .gk-phone-number > strong {
    font-size: 22px;
}
}


Is very close to the desired result!

1. Original;
2. At small screen the text is not transformed;
3. Fix the width of the video background.

Hi

3.

Code: Select all

.box.video-bg video {
    width: 100%;
}

@media only screen and (max-width:1920px) {
.box.video-bg video {
    width: auto;
    height: 100%;
}
}


2.

Code: Select all

@media only screen and (max-width:460px) {
.box.video-bg .gk-border-box > h2 {
    letter-spacing: 1px;
    font-size: 24px;
}

.box.video-bg .gk-border-box .gk-phone-number > sup {
    display: block;
    font-size: 10px;
    letter-spacing: 0;
    margin-bottom: 10px;
    top: 0;
}

.box.video-bg .gk-border-box .gk-reservation-button > .btn {
    font-size: 10px;
}
}


Excellent work!
Thanks, teitbite!

Hi


Glad I could help.
---
If You were satisfied with our support please let other users know on Twitter: http://twitter.com/gavickpro or Facebook: http://www.facebook.com/gavickpro