HTML5 video/Mobile response problem?

  • Hi All,

    I’m developping my own theme for my website and I’ve got a video playing at the top behind the heading. On my browser it looks exactly as I would like it to, but on mobile devices it has a big gap at the top.

    I’ve run out of ideas, so I was hoping someone could take a look for me?

    HTML:

    <!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<script src="https://scott.ewarena.com/blog/wp-content/themes/bootstrapstarter/video.min.js"></script>
    <script src="https://scott.ewarena.com/blog/wp-content/themes/bootstrapstarter/nav.min.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <?php wp_head(); ?>
  <link rel='stylesheet' href='//fonts.googleapis.com/css?family=Droid+Serif|Vollkorn:400,400i' type='text/css'>
	
	</head>

<body <?php body_class(); ?>>

<div id="blog-masthead">

		<div class="NavAlignLeft"><a href="/">Site Name</a></div>

		<div class="NavAlignRight"> 
<!-- Change this to an include later -->		
<ul class="topnav" id="myTopnav">
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
  <li class="icon">
    <a href="javascript:void(0);" onclick="myFunction()">☰</a>
  </li>
</ul>

</div>
		<div style="clear:both;"></div>		
		
</div>

<!-- Video test -->

    <div id="video_overlays">
	
    <div class="abovethefold">
        <h1 class="blog-title"><?php bloginfo( 'name' ); ?></h1>
        <?php $description = get_bloginfo( 'description', 'display' ); ?>
        <?php if($description) { ?><p class="blog-description"><?php echo $description ?></p><?php } ?>
		
		    <p class="button">
	<a class="blue-button" href="#cta">Call to Action</a></p>
    </div></div>

	
<div class="homepage-hero-module">
    <div class="video-container">
        <div class="filter"></div>
        <video autoplay loop class="fillWidth">
			<source src="https://scott.ewarena.com/blog/wp-content/themes/bootstrapstarter/Busy-People/MP4/Busy-People.mp4" type="video/mp4" />Your browser does not support the video tag. I suggest you upgrade your browser.
            <source src="https://scott.ewarena.com/blog/wp-content/themes/bootstrapstarter/Busy-People/WEBM/Busy-People.webm" type="video/webm" />Your browser does not support the video tag. I suggest you upgrade your browser.
			<img src="https://scott.ewarena.com/blog/wp-content/themes/bootstrapstarter/Busy-People/Snapshot/Busy-People.jpg" title="Your browser does not support the <video> tag">
			</video>
			            			<div class="poster hidden">
            <img src="https://scott.ewarena.com//blog/wp-content/themes/bootstrapstarter/Busy-People/Snapshots/Busy-People.jpg" alt="">
			</div>
	</div>
</div></div>

    CSS:

    
.homepage-hero-module {
    border-right: none;
    border-left: none;
    position: relative;
	width: 100%;
	height: 400px;
}
.no-video .video-container video,
.touch .video-container video {
    display: none;
}
.no-video .video-container .poster,
.touch .video-container .poster {
    display: block !important;
}
.video-container {
    position: relative;
    bottom: 0%;
    left: 0%;
    height: 100%;
    width: 100%;
    overflow: hidden;
    /*background: #000;*/
}
.video-container .poster img {
    width: 100%;
    bottom: 0;
    position: absolute;
}
.video-container .filter {
    /*z-index: 100;*/
    position: absolute;
    background: rgba(0, 0, 0, 0.4);
    width: 100%;
}
.video-container video {
    position: absolute;
    /*z-index: 0;*/
    bottom: 0;
}
.video-container video.fillWidth {
    width: 100%;
	}

#video_overlays {
position:absolute;
float:left;
    width:100%;
    height:100%;
    background-color:transparent;
    z-index:1;
}

    JS:

    //jQuery is required to run this code
$( document ).ready(function() {

    scaleVideoContainer();

    initBannerVideoSize('.video-container .poster img');
    initBannerVideoSize('.video-container .filter');
    initBannerVideoSize('.video-container video');

    $(window).on('resize', function() {
        scaleVideoContainer();
        scaleBannerVideoSize('.video-container .poster img');
        scaleBannerVideoSize('.video-container .filter');
        scaleBannerVideoSize('.video-container video');
    });

});

function scaleVideoContainer() {

    var height = $(window).height() + 5;
    var unitHeight = parseInt(height) + 'px';
    $('.homepage-hero-module').css('height',unitHeight);

}

function initBannerVideoSize(element){

    $(element).each(function(){
        $(this).data('height', $(this).height());
        $(this).data('width', $(this).width());
    });

    scaleBannerVideoSize(element);

}

function scaleBannerVideoSize(element){

    var windowWidth = $(window).width(),
    windowHeight = $(window).height() + 5,
    videoWidth,
    videoHeight;

    console.log(windowHeight);

    $(element).each(function(){
        var videoAspectRatio = $(this).data('height')/$(this).data('width');

        $(this).width(windowWidth);

        if(windowWidth < 1000){
            videoHeight = windowHeight;
            videoWidth = videoHeight / videoAspectRatio;
            $(this).css({'margin-top' : 0, 'margin-left' : -(videoWidth - windowWidth) / 2 + 'px'});

            $(this).width(videoWidth).height(videoHeight);
        }

        $('.homepage-hero-module .video-container video').addClass('fadeIn animated');

    });
}

    Available on JSFiddle: https://jsfiddle.net/w6wfdeco/2/

    I’m not sure I’ve posted this in the right place, so please feel free to relocate it, but I’m out of ideas of who to ask so I’m asking here because there are so many experienced coders!

    Thank You,
    Scott

Viewing 1 replies (of 1 total)
Viewing 1 replies (of 1 total)
  • The topic ‘HTML5 video/Mobile response problem?’ is closed to new replies.