video in pages header

[nomadsrtw]

hello,

I have been checking this topic from other people, but none of the answers is helping my case. I do have the auto video post on and auto detect video also, but since I want to do it in a page, i don’t think this is relevant.

What I want, is to display a video on the header of a page, replicating what is done with the homepage. Can you guys help on this?

This is the page in which . I’d like to display a video on the header:
https://nomadsrtw.com/about-us/

[themes2go]

Hi, in fact you are right the 2 things are not connected at all.
What you want to do is to create a page, set visual composer page template and then create a row with a video background.
Importing videos is instead to create video posts, not pages 😉

[nomadsrtw]

Thanks for your feedback.

Unfortunately is not working.

I have set up the page to vlogger theme default page, created a new column at the top and edit to select the youtube video and is showing up as a row rather than in the header: https://nomadsrtw.com/about-us/

[themes2go]

Hi,
try to choose the “Page Fullwidth Template” and it should work 😉

https://imgur.com/a/td7fZf6

Andrea

• This reply was modified 6 years, 5 months ago by themes2go.

[nomadsrtw]

Hi Andrea, I have done so, and hidden the header, but it was not quite what I expected. The video was showing in a small row only, and I needed to add up to 6 spacers so it will on a bigger scale. Even is a bit better, is not as responsive as the one in the homepage. Is there a way to scale it up to the screen resolution instead of my patching it up with spacers? 😀

YOu can take a look to see what i mean

Regard

[themes2go]

Hello,
if you want the same look of the homepage’s header you can edit the page in “Classic Mode” (button is positioned on the top-left of the page) and copy this snippet of code:

[vc_row video_bg="yes" video_bg_url="https://www.youtube.com/watch?v=5SgyFaBS7WI" css_animation="fadeIn" css=".vc_custom_1503149625259{margin-top: 0px !important;padding-top: 0px !important;background-image: url(https://themes2go.xyz/demos/vlogger/youtuber/wp-content/uploads/2017/07/vlogger-header-mobile.jpg?id=1646) !important;}" el_id="Header"][vc_column css_animation="fadeIn" el_class="qt-center" css=".vc_custom_1503132803142{margin-top: 0px !important;padding-top: 0px !important;}"][vc_row_inner css=".vc_custom_1503132851965{margin-top: 0px !important;padding-top: 20% !important;padding-right: 5% !important;padding-bottom: 20% !important;padding-left: 5% !important;background-color: rgba(0,0,0,0.2) !important;*background-color: rgb(0,0,0) !important;}"][vc_column_inner][vc_column_text css_animation="none"]

Travelling is my Biggest Passion
[/vc_column_text][vc_column_text css_animation="none"]

I WANT TO TRAVEL THE WORLD AND NEVER COME BACK
[/vc_column_text][vlogger-button text="Follow my Journey" link="http://themes2go.xyz/demos/vlogger/youtuber/all-series/" size="qt-btn-xl" style="qt-btn-primary" alignment="aligncenter"][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row]

Then switch back to “Backend editor” and you should have the same row of the header.

You can also try to set the “Full height” option in the row settings:

https://imgur.com/a/3zPgUjH

Lastly, instead of adding spacers you can simply add padding in the “Design Option” tab: you can set it via percentage (e.g. 10%) or pixel (e.g. 50px).

Hope this can help you.
Andrea

[nomadsrtw]

Got it now!! Thanks 😀

[themes2go]

Nice!
I am going to close this ticket.

All the best,

Andrea