How to use Vimeo Header Block

Example site:

• http://brianclay2.realvolution.com/

Fix overlapping issues:

• Set position: relative;
• Set z-index: 1;
• Note, you don’t always need to set z-index.

Steps for copying into a site:

1. Find the header that you’d like to use on the example site.
2. Open the example site in the builder
3. Go to the page the header is on
4. Grab the CSS from the Page Settings
5. Paste CSS into page setting where the video header will be used
6. Update the mobile background image in the css if needed. That is located in the Page Settings CSS.
7. Include the following HTML just before the </header> tag

<div class="image-overlay"></div>
<div class="video-overlay"></div>
<div class="video-background">
	<div class="video-foreground">
		<iframe class="video-bg" src="https://player.vimeo.com/video/287060201?autoplay=1&loop=1&autopause=0&muted=1&title=0&byline=0&portrait=0&background=1" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" frameborder="0"></iframe>
	</div>
</div>

8. Change the 9 digit video id number in the iframe code with your desired Vimeo video. In the example above the number is 287060201.

9. You can modify the overlay color and intensity by editing the background-color of .video-overlay and/or .image-overlay