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:

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 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><!-- /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><!-- /box -->
            <?php $count++; endwhile; ?>
        </div><!-- /oontent-section -->
    </section><!-- /content -->
<?php endif; ?>
<?php endwhile; endif; ?>
<?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?

2 Answers 2


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;

See Screenshot


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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.