Video Under Header

Hi,

I’m trying to put a video under the header page on some of my page. i tried the Video header widget but it puts the video on all the pages and it only takes youtube and vimeo videos.

I want to put a video from my galary like i have it on the following page(using Master slider).

http://www.morabitobaking.com/about-us/

But this video wont work on mobile devices so i was wondering if i can put a video just like the one on the above page using some other way.

I tried to put video directly in the following page (through page builder) but i cant get it to fit full width.
http://www.morabitobaking.com/video-test/.

Please advise if there is a way around.

Thank You.

I forgot one more thing, the footer on the pages moves up if the content of that page is not enough for the height of the screen.
How can i make the footer always stick to the bottom?

Thank you.

Hello there,

To force the video full width, could you please try to apply the following CSS code through the Simple Custom CSS plugin or child theme’s style.css?

#pgc-864-0-0 .wp-video,
#pgc-864-0-0 #mep_0{
  width: 100% !important;
}

> How can i make the footer always stick to the bottom?

Try adding the following CSS code:


.page-wrap{
  height: calc(100vh - 205px);
  height: -moz-calc(100vh - 205px);
  height: -webkit-calc(100vh - 205px);
}

@media only screen and (max-width:1024px){
  
  .page-wrap{
    height: calc(100vh - 200px);
    height: -moz-calc(100vh - 200px);
    height: -webkit-calc(100vh - 200px);
  }  
  
}

Regards,
Kharis

both the codes solved the issues but how to remove the padding between the header and the video in the the following page:
http://www.morabitobaking.com/video-test

sorry, i just checked the website on my cell phone and the background of the pages changed to the color of footer for some reason.

To remove the space between the video and the header, try adding this CSS code:


#pl-864{
  margin-top: -10px;
}

I visited your page: http://www.morabitobaking.com/video-test. The background doesn’t seem to be changed on the smaller screen. Have been able to figure it out?

Regards,
Kharis

Hi Kharis,

Sorry i removed the code from css after i saw the footer in the middle of the page.
i Just added it back. on desktop it shows footer in middle and on mobile it changes the background in the middle of the page or maybe that is also footer in the middle of the page.

Also, Thank you for the margin code. it removed the blank space.

Thank You

The footer is in the middle of all the pages whose content is more than the height of the screen. i believe the above code just puts the footer on the bottom of the screen on page load but when you scroll down the footer also scrolls with it and stays in the middle.

One more thing, the video is set to autoplay and it does so on desktop but not on the mobile or tablet view. And if possible is there a way to stop the pause on click on the video. i want it to autoplay at all times.

Thank You.

Sorry i also forgot on mobile and tablet the video is not full width it has side padding.

Hello there,

Please try the code below:


.page-wrap {
    height: calc(100vh - 204px);
    height: -moz-calc(100vh - 204px);
    height: -webkit-calc(100vh - 204px);
}

.page .page-wrap .content-wrapper, 
.single .page-wrap .content-wrapper {
    padding-top: 0;
}

@media only screen and (max-width:1024px){
  
  .page-wrap {
      height: calc(100vh - 200px);
      height: -moz-calc(100vh - 200px);
      height: -webkit-calc(100vh - 200px);
  }  
  
}

@media only screen and (max-width:780px){
  
  #pgc-864-0-0{
    padding-left: 0 !important;
    padding-right: 0 !important;
  } 
  
}

@media only screen and (max-width:767px){
  
  .page-wrap {
      height: calc(100vh - 188px);
      height: -moz-calc(100vh - 188px);
      height: -webkit-calc(100vh - 188px);
  }  
  
}

Regards,
Kharis

Hi Kharis,

The above code removed the side padding from the video-test page but the footer is still stuck in the middle of the pages.

Hello there,

Thank you for updating me. Could you please take a screenshot of it and share it here, so I could figure it out easier?

For screenshot, you can upload it to the free file hosting service like Google Drive, Dropbox, or cloudup.com and post the link into it here.

Regards,
Kharis

Hi kharis.

You can just go to http://www.morabitobaking.com/

Thanks

Hello there,

So you want the “Get in touch” items to always in three columns even on the smaller screen? Please advise.

Regards,
Kharis

Hi Kharis,

No, the get in touch is fine as it is, the only issue is the footer not being at the bottom. with the above code the footer is now in the middle of the pages.

http://www.morabitobaking.com/

Thank you,

Hello there,

Please replace the code I suggested with this one:


.page-id-864 .page-wrap {
    height: calc(100vh - 204px);
    height: -moz-calc(100vh - 204px);
    height: -webkit-calc(100vh - 204px);
}

.page .page-wrap .content-wrapper, 
.single .page-wrap .content-wrapper {
    padding-top: 0;
}

@media only screen and (max-width:1024px){
  
  .page-id-864 .page-wrap {
      height: calc(100vh - 200px);
      height: -moz-calc(100vh - 200px);
      height: -webkit-calc(100vh - 200px);
  }  
  
}

@media only screen and (max-width:780px){
  
  #pgc-864-0-0{
    padding-left: 0 !important;
    padding-right: 0 !important;
  } 
  
}

@media only screen and (max-width:767px){
  
  .page-id-864 .page-wrap {
      height: calc(100vh - 188px);
      height: -moz-calc(100vh - 188px);
      height: -webkit-calc(100vh - 188px);
  }  
  
}

so the .page-wrap height will affect only on your video test page. If you want to apply it on other page, replace 864 from the code above with the page ID where you wish it will be affected on.

Regards,
Kharis

Help. Need to fix this asap

Sorry i waa waiting for an answer but i didnt see the above answer was on second page.

I willvtrybthe above code and ket you know

Hi Kharis,

I tried the above code but it still keeps the footer in the middle when the content goes more than the height of screen.

I guess i will just have to put some blank content on the pages.

Thank You.

Hi Kharis,

Since the above code didnt work. Is there a way to remove the footer from all the woocommerce pages.

Thank you