How can I embed a background video into my Wordpress theme using HTML5 and without using a plugin?

Question

I'm attempting to add a background video to a wordpress website in place of the large image that is currently there.

I understand how to set up the video with HTML5 and CSS, but am not very familiar with php and am kind of lost on where to begin when it comes to writing a function to pull the video/s (wmp and mp4) from the media library and display them.

Any guidance on how to go about this would be much appreciated. Thanks!

I know that this is the part of the code that needs to be modified:

<div class="intro-block">
    <?php if ( has_post_thumbnail() ):?>
        <?php the_post_thumbnail('full'); ?>
    <?php else: ?>
        <?php
            $image = get_field('global_intro_image', 'option');
            if( !empty($image) ): ?>
            <img src="<?php echo $image['url']; ?>" alt="<?php echo        $image['alt']; ?>" >
        <?php endif; ?>
        <?php endif; ?>
        <div class="text-holder">
        <div class="container">
            <?php if( $title = get_field( 'title' )) : ?>
                <h1><?php echo $title; ?></h1>
            <?php endif; ?>
            <?php if( $find_btn_link = get_field( 'find_btn_link' )) : ?>
                 <a href="<?php echo $find_btn_link; ?>" class="btn btn-blue white-border">    <?php echo get_field( 'find_btn_text' ); ?></a>
            <?php endif; ?>
        </div>
    </div>
</div>

It currently pulls the featured image for the page and displays it.

Any suggestions on where to begin?

Thanks in advance!

Answer 1

First you need to find out which part is calling the image. Looks like this part:

  if( !empty($image) ): ?> <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" > <?php endif; ?> 

Then comment out this part or just remove this part of the code and replace if with video tag and style it so it looks just as you need.

Then if you need to be able to indicate videos from wordpress back end, than you need to create options page / or only add fields if you have theme options page. https://codex.wordpress.org/Creating_Options_Pages

Even easier is to create options pages with ACF pro