Video header on mobile, disappears behind header and content

Question

On https://www.altcinematic.co.uk/video-test/ I have input a video header using advanced custom fields and a new page template.

Page template:

<?php
/*
Template Name: Video Banner
*/
?>
<?php get_header(); ?>
<main class="main-content">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <section class="fullscreen-intro homepage">
        <?php the_field('video_banner'); ?>
    </section>
<section id="content">
    <div class="content-section<?php if(have_rows('films')){echo " padding-bottom-remove";} ?>">
        <div class="white">
            <div class="box-white container-box<?php if(have_rows('films')){echo " margin-bottom-remove";} ?>">
                <?php the_content(); ?>
            </div>
        </div><!-- /white -->
    </div><!-- /oontent-section -->
</section><!-- /content -->
<?php if(have_rows('films')):
    $count = 1; ?>
    <section id="content">
        <div class="content-section">
            <?php while(have_rows('films')): the_row();
                if(is_int($count / 2)){
                    $position = "align-left";
                }
                else {
                    $position = "align-right";
                }
                if($video = get_sub_field('is_this_a_video') == "yes"){
                    $type = "video";
                }
                else {
                    $type = "other";
                }
                ?>
                <article class="yellow film-box <?php echo $position . " " . $type; ?>">
                    <div class="box container-box clear-fix">
                        <div class="box-right-top">
                            <div class="img video-wrap">
                                <div class="iframe-wrap">
                                    <?php the_sub_field('vimeo_link'); ?>
                                </div><!-- /iframe-wrap -->
                            </div><!-- /img -->
                        </div><!-- /box -->
                        <div class="box-left-top">
                            <h1><?php the_sub_field('title'); ?></h1>
                            <?php the_sub_field('intro_text'); ?>
                        </div>
                    </div><!-- /box -->
                </article>
            <?php $count++; endwhile; ?>
        </div><!-- /oontent-section -->
    </section><!-- /content -->
<?php endif; ?>
<?php endwhile; endif; ?>
</main>
<?php get_footer(); ?>

This works fine on desktop, however I can not get the position of video correct on tablet and mobile? It sits behind the header and content areas rather than in-between them, hence if I add margin / padding it just moves the video behind.

I have inherited this site and hence may not be fully understanding how these elements are being controlled?

Answer 1

You can target those devices using css, and put a declaration specifically for that.

Add this to your css file, and adjust to the suitable value:

@media screen and (max-width: 768px) {
    .page-template-page-video-banner .fullscreen-intro {
        margin-top: 135px !important;
    }
}

Answer 2

This question is nothing to do with WordPress. Your problem is position fixed of your header. Try to wrap your iframe with a div with property margin-top: your-header-height