Repurposed from twentyseventeen.Well while i was doing a little google-search i have found the following Here’s a block of code I’m using on my Aurora theme for background images. Absolutely positioning your header will make the image or video scroll with the rest of the page. Using position fixed on your background is going to create a pseudo parallax effect 1 where the image or video will stay in place as the user scrolls. Styling the header markup can be a little tricky because you want to make sure things look good across various screen sizes. But first you’ll drop the_custom_header_markup() in your theme where you want your image or video header output.

This is useful for styling the output which we’ll be getting into shortly. If you’re using a video or image header, the_custom_header_markup() will output a div with the class wp-custom-header containing a img, video, or iframe.

When WordPress introduced video headers they also added in the_custom_header_markup() which can be used to display both images and video. Displaying the Header in Your Site with the_custom_header_markup() To battle that, when video headers are added to your site a play and pause button is also output.

Video headers are cool, but did you realize they could disorient or distract some users of your site? A definite consideration for keeping your bandwidth in check. But if needed elsewhere that can be by creating a custom callback for the video-active-callback and using the is_header_video_active filter.įrom the perspective of your site’s bandwidth you can also use videos from YouTube instead of hosting and serving the video yourself. Although it’s recommended to go much smaller.īy default the video headers will only display on the front page too. WordPress knows this and the video header theme support will only display the video on screens larger than 900px wide and 500px tall. Especially when autoplayed as a background.

Add_theme_support( 'custom-header', array(Īdd_action( 'after_setup_theme', 'prefix_custom_header_setup' ) įor a more in depth look at custom headers check out the Theme Handbook on Custom Headers.

Wordpress theme 2017 header video