Video in Hero instead the featured image

Hi there,

i want to replace the featured image with a video on two different pages. The pages also use the Hero element I created. Via a Hook-element i switch from featured image to video when this page has a video. I added some code but the Hero where the video is played doesn’t respect the global width. Could you help with forcing it into the Hero width?
That’s the code for the video in the Hook element:

<?php
$video = get_field('page_video');
if ($video && !empty($video)): 
    $video_ext = pathinfo($video, PATHINFO_EXTENSION);
    $video_type = 'video/' . $video_ext;
    ?>
    <div class="page-hero-media">
        <video autoplay muted loop playsinline controls preload="auto">
            <source src="<?php echo esc_url($video); ?>" type="<?php echo esc_attr($video_type); ?>">
            <p>Your browser doesn't support HTML5 video. <a href="<?php echo esc_url($video); ?>">Download the video</a> instead.</p>
        </video>
    </div>
<?php 
elseif (has_post_thumbnail()): 
    ?>
    <div class="page-hero-media">
        <?php the_post_thumbnail('full'); ?>
    </div>
<?php endif; ?>

That’s the CSS:

/* Video positioning on Woningbouw page */
.page-id-666 .page-hero-media {
    position: relative;
    z-index: 1;
}

.page-id-666 .page-hero-media video {
    width: 100%;
    height: auto;
    display: block;
    background: #000;
    position: relative;
    z-index: 1;
}