How to enable video background on custom homepage header?

  • Resolved Nic727

    (@nic727)


    1 year, 6 months ago

    Hi,

    My homepage is static, because of the overall design impossible to do with blocks. I did his header with a hero image using PHP.

    How can I add an option to add a looping video as a background instead of an image. I would like to have those two options. I’ve looked for some plugins, but they don’t really help in the case of custom code. Like I know I would need to upload my own video, use a fallback image (use the image already uploaded?) and have the video loop forever… But how can I achieve this?

    Thank you

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • Thread Starter Nic727

    (@nic727)

    ok I fixed my problem with ChatGPT help lol.

    Into functions.php

    $wp_customize->add_setting( 'home_vid', array(
        'type' => 'theme_mod',
        'sanitize_callback' => $pgwp_sanitize
    ));
    $wp_customize->add_control( new WP_Customize_Media_Control( $wp_customize, 'home_vid', array(
        'label' => __( 'Home video', 'aurora' ),
        'type' => 'media',
        'mime_type' => 'video',
        'section' => 'aurora_default_cs'
    ) ) );
    function allow_video_upload( $existing_mimes ) {
        $existing_mimes['mp4'] = 'video/mp4';
        $existing_mimes['mov'] = 'video/quicktime';
        // Ajoutez d'autres extensions de fichiers vidéo si nécessaire
        return $existing_mimes;
     }
     add_filter( 'mime_types', 'allow_video_upload' );

    Now just call the video on your page with

    $video = wp_get_attachment_url( get_theme_mod( 'home_vid' ));

 echo '<video id="home-video" class="featured-video" width="320" height="240" autoplay loop muted>
                <source src="' . esc_url($video) . '" type="video/mp4" />
                Your browser does not support the video tag.
            </video>';

    You can add some more elements like if to see if the video exist before calling it.

    However, it now works and just need to fix a small looping issue, but overall it’s working great!

Viewing 1 replies (of 1 total)
  • The topic ‘How to enable video background on custom homepage header?’ is closed to new replies.