Высота DIV изменяется после вставки нового HTML

Question

Я установил заголовок видео на своей домашней странице. Я установил javascript, чтобы удалить DIV (id = remove) с видео (после того, как он закончится) и заменить его изображением и 2 кнопками.

Что происходит, так это то, что следующий DIV ниже DIV Video / Image (id = videoheader) сдвигается вниз при увеличении высоты DIV.

Я думаю, что css неправильно позиционирует 2 кнопки, потому что при запуске без вставки 2 кнопок ничего не происходит, и все остается на месте, как и ожидалось.

Я пытался расположить кнопку относительно и без результата. Я попытался настроить поля, чтобы расположить следующий div, чтобы он не двигался.

спасибо за помощь, Эрвин

<div id="videoheader">
    <div id="show" class="page-video-containter">
        <div id="remove">
            <video id="myVideo" playsinline="" autoplay="" 
                muted="" class="page-media">
                <source src="testvideo.mp4" type="video/mp4"> 
            </video>
        </div>                   
    </div>
    <script type='text/javascript'>
        document.getElementById('myVideo').addEventListener('ended',myHandler,false);
        function myHandler(e) {
            var el = document.getElementById ("remove");
            el.remove();

            document.getElementById("show").insertAdjacentHTML('beforeend', 
                '<img class="page-media" src="SL_STILLS_10.png"> <div 
                class="women"> <input type="button" class="button" 
                onclick="location.href=\'#\';" value="Women shop here" /> </div> 
                <br> <div class="men"> <input type="button" class="button" 
                onclick="location.href=\'#\';" value="Men shop here" /> </div>');
        }
    </script>
</div>

Это CSS

.page-video-container { 
    position: relative; width: 100%; height: 100%; 
}
.page-media { 
    position: relative; width: 100%; height: 100%; top: 0; 
    left: 0; right: 0; bottom: 0; background-size: cover; z-index: -1; 
    margin: 0; 
}
#videoheader {
    position: relative; margin: 0%; 
}
.videotext { 
    color: white; margin: 0px; padding: 20px; position: 
    absolute; top: 2%; font-size: 2vw; 
}
#videoheader .women .button {
    margin-top: -1%; position: absolute; 
    top: 5%; left: 50%; transform: translate(-50%, -50%); 
}
#videoheader .men .button {
    margin-top: -1%; position: absolute; top: 
    10%; left: 50%; transform: translate(-50%, -50%); 
}