How is motion created in this website?

[Nightwing]

Hi from stunningly warm (19 degrees) and sunny York UK

This site http://www.netconstruct.co.uk/ has a motion effect running in the background like a mini film. How have they done this? is it a flash thing?

[RyanReese]

It uses a <video> as an overlay. It’s not playing for me, but the HTML is set up for that, apparently.

[Nightwing]

Thank Ryan

[coothead]

Hi there Nightwing,

For the specific HTML code location:-

if you use “View Source”, then on line 363 you will find this…

<div class="videoBg">
<video autoplay="autoplay" loop muted="muted" id="home-video" poster="/SiteFiles/Images/firstframe.jpg">       
<div class="ieImagePlaceholder">
<img src="/SiteFiles/Images/firstframe.jpg" alt="" />
</div>
</video>
</div>

If you then use “View Generated Source”, you will find on line 361 this…

<div style="min-height: 569px;" class="videoBg">
<video style="min-height: 569px;" autoplay="autoplay" loop="" muted="muted" id="home-video" poster="/SiteFiles/Images/firstframe.jpg">       
<source src="http://7a676bd6740999680ee8-a499b3f8b21194927319f57ccff8edae.r98.cf3.rackcdn.com/Sequence.mp4" type="video/mp4">
<div class="ieImagePlaceholder">
<img src="/SiteFiles/Images/firstframe.jpg" alt="">
</div>
</video>
</div>

…which has been created by “JavaScript”.

coothead

[arthiSuresh]

They are using one of the methods to implement a video background…
this post covers that…
http://demosthenes.info/blog/777/Create-Fullscreen-HTML5-Page-Background-Video

[Nightwing]

Brill thanks

[Nightwing]

Fab tutorial referenced thankyou, just love this background effect

[djsmithme]

I would seriously recommend loading the video via ajax after the page has loaded. A full screen 30 second clip your be luck to have under 1.5mb which is a massive hit on your load times. You will also have to come up with a solution for mobiles as they block autoplay by default.