Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Custom Header Video
// In inc/customize.php:
function twentyseventeen_customize_register( $wp_customize ) {
// Adjust the header image section to also include video.
$wp_customize->get_section( 'header_image' )->title = __( 'Header', 'twentyseventeen' );
$wp_customize->get_section( 'header_image' )->active_callback = 'is_front_page';
$wp_customize->add_setting( 'header_video', array(
'sanitize_callback' => 'absint', // Attachment id is saved.
'transport' => 'postMessage',
));
$wp_customize->add_control( new WP_Customize_Media_Control( $wp_customize, 'header_video', array(
'mime_type' => 'video',
'label' => __( 'Header Video', 'twentyseventeen' ),
'description' => __( 'Displayed in place of the header image when provided. Optimize your video file by setting its width to 960px and keeping the bitrate and filesize as low as possible for best results.', 'twentyseventeen' ),
'section' => 'header_image',
'priority' => 0,
'active_callback' => 'is_front_page',
)
));
$wp_customize->selective_refresh->add_partial(
'header_video', array(
'selector' => '#header-video',
'settings' => array( 'header_video' ),
'render_callback' => 'twentyseventeen_header_video',
)
);
}
add_action( 'customize_register', 'twentyseventeen_customize_register' );
// In inc/template-tags.php:
function twentyseventeen_header_video() {
$video = get_theme_mod( 'header_video' );
$video = esc_url( wp_get_attachment_url( $video ) );
if ( $video ) {
wp_enqueue_script( 'mediaelement' );
echo wp_video_shortcode( array(
'src' => $video,
'width' => 960, // This should be around the content width, and generally as small as we can make it to work for the design, for filesize considerations.
'height' => 540, // We should set this automatically based on the attachment meta.
'loop' => 'loop',
'autoplay' => 'autoplay',
));
}
}
// In front-page.php:
...
<div id="header-video">
<?php twentyseventeen_header_video(); ?>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment