How is motion created in this website?

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

This site has a motion effect running in the background like a mini film. How have they done this? is it a flash thing?

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

Thank Ryan :slight_smile:

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="" />

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="" type="video/mp4">
<div class="ieImagePlaceholder">
<img src="/SiteFiles/Images/firstframe.jpg" alt="">

…which has been created by “JavaScript”.


They are using one of the methods to implement a video background…
this post covers that…

1 Like

Brill thanks :slight_smile:

Fab tutorial referenced thankyou, just love this background effect :slight_smile:

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.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.