Modifications to Kristian Youngs Website Part 3



Device support time.

I have the video playing in the background within the browser, I now need to work out how to get phone and tablet devices to work with the site. 

I stumbled upon the modernizr javascript a little while back when doing some responsive development at work. As the library’s site says the modernizr library ” detects the availability of native implementations for next-generation web technologies” 

When looking round on the web for solutions for the video background I found that bigvideo.js had used modernizr to detect if the device was touch device and then puts a background image onto the page instead of the video.

 

var BV = new $.BigVideo(); 
BV.init(); 
if (Modernizr.touch) { 
BV.show('video-poster.jpg'); }
else { 
BV.show('video.mp4',{ambient:true}); }

I have now implemented this into the example I have been working on. It works great now just for testing on different screen sizes and devices.

Testing time!