Hi Chris

they should be direct links to the video source files as described by the specs for <video> tag

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video

the link you provided points actually to one of their video players. Is it possible to get the direct links from them?

Hi Chris,

if i preview the video separately

https://d14xcw7l6mfoph.cloudfront.net/Michigan+Hype+Video_Final.mp4

it has indeed lags - can you talk w/ them to see how you can improve the speed?

Also I wanted to mention is that you can remove the sound track from the video is the video is muted - if you have not done it already.

Hi Chris, 

removing the audio track from the file will reduce its size therefore will improve the streaming speed. the autoplay will work only with muted videos due to autoplay policy implemented in most browsers.

You should keep .webm and .mp4 formats but try using data compression tools like Blazemp and HandBrake to reduce the size of video files without degrading image quality. 

It is not recommended, as a general practice, having videos autoplaying on mobile (and taking in consideration different data mobile plans and different networks streaming speeds). You should provide a poster image (hero image) for mobile in video portfolio options.

However, to enable video on mobile try the following:

1. add

@media only screen and (max-width: 1024px){      

     .hero-video-wrapper {         

         display: block;         

         visibility: visible;      

    }

}

in customizer -> additional CSS

2. open/js.scripts.js and remove the following lines:

var viewportWidth = $(window).width(); 

if (viewportWidth < 1024) {      

     $('.hero-video-wrapper').remove();   

}

hard refresh the page (Ctrl+F5) when you are done.

Ok Chris, this is great news.

Hi Chris 

what is the mobile device you are testing with. I used samsung android phone and it plays fine.

Hi Chris 

the problem with ios devices is they interpret the HTML 5 videos as videos without player so they will embed it it in a popup player. It's one of the reasons we do not recommend enabling videos on mobile.

There is nothing we can do in this regard.

That's right I forgot about the 'playsinline' attribute, thanks Chris.

1. go to showcase-page.php and change line 73 from

<video loop muted class="bgvid">

to

<video loop muted playsinline class="bgvid">

2. same thing for /sections/hero_section_container.php  line 51

Ok Chris at least you gave it a try.

Hi Chris

the code was between lines 509 and 512 this is the complete section

...

// Video Center on click
$('.video-wrapper').on('click', function() {
var $window = $(window),
$element = $(this),
elementTop = $element.offset().top,
elementHeight = $element.height(),
viewportHeight = $window.height(),
scrollIt = elementTop - ((viewportHeight - elementHeight) / 2);
if ($("body").hasClass("smooth-scroll")) {
var scrollOffset = scrollbar.offset.y + (elementTop - scrollbar.getSize().container.height/2);                    
TweenLite.to(scrollbar, 0.8, {scrollTo:scrollOffset + elementHeight/2, ease:Power4.easeInOut});                    
}
else{                    
$("html, body").animate({ scrollTop: scrollIt }, 350);                
}
});


var viewportWidth = $(window).width();
if (viewportWidth < 1024) {
     $('.hero-video-wrapper').remove();  
}

$('#backtotop').on('click', function() {
if ($("body").hasClass("smooth-scroll")) {
TweenLite.to(scrollbar, 1.5, {scrollTop:0, ease:Power4.easeInOut});
} else {
$("html,body").animate({scrollTop: 0}, 800);
}
});

....