This page demonstrates using a video in the header as a header image replacement.
This demonstration page uses options available with the Weaver Xtreme Plus (Version 3.0 or later) plugin. The Free version of Weaver Xtreme supports Header Video only on the front page, while Xtreme Plus allows complete control over which Header Videos can be used on which page. There is no visual difference in how the pages will look – just where the videos are displayed.
Because the video is used as a full Parallax Background image, this text color for this page has been changed to white, and a black transparent background set for the container area.
An alternative would be to make the Container area have a white background. This the content portion of this page would look like all the other pages.
Also note that when you view this page on a narrow or mobile device, the matching header image for the video will be displayed as a normal header image. In this specific case, the Featured Image for this page was set to the matching BG image, and the Per Page option for the Featured Image was set to Header Image Replacement.
Summary of Per Page Settings to Show Video on this page (using Weaver Xtreme Plus options)
- Featured Image: set to image matching video
- Per Page Featured Image Display: Header Image Replacement
- Display Video on This Page: Yes
- Video URL for This Page: Appropriate YouTube link
- Aspect Ratio: 2.37:1 Cinemascope
- Header Video Rendering: As full cover Parallax BG Video
- Per Page Style: #container {background:rgba(0,0,0,.4); color:white;}
Demo Page of Header Video as Header Image Replacement