I have a custom header video on my WordPress site and I have an overlay (an svg I repeat in the background of a div) that I want to live on top of the video. I accomplished this like so

<?php the_custom_header_markup(); ?>
<div class="header__overlay"></div>

However this creates a problem. Because the video and the generated pause button are both in the generated wp-custom-header div, I cannot get my overlay between them. ie For my overlay to be z-indexed over my video, it is also over top of my button.

Is there a way for me to filter the output of The_custom_header_markup to include additional markup. That functions typical markup is:

<div id="wp-custom-header" class="wp-custom-header">
<video id="wp-custom-header-video"></video>
<button type="button" id="wp-custom-header-video-button" class="wp-custom-header-video-button ...">Pause</button>
</div>

What I want is

<div id="wp-custom-header" class="wp-custom-header">
<video id="wp-custom-header-video"></video>
<div class="header__overlay"></div>
<button type="button" id="wp-custom-header-video-button" class="wp-custom-header-video-button ...">Pause</button>
</div>

Thanks In advance! JoesLost