Menu Search
Jump to the content X X
SmashingConf London Avatar

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf London, dedicated to all things web performance.

Creative Use of Video in Web Design: Background Videos

Since its early days, video has been one of the most powerful and efficient tools of visual communication. It is able to deliver a direct and clear message to a broad audience as well as focus viewers on something particular. A visually appealing video is an excellent way to present a product, service or brand and take user experience to a much more interactive level. For this reason, elegant, creative and professional videos are becoming increasingly popular in Web design today.

Some designers go even further, creating Bluray-like experience in the browser, with interactive navigation menus, soft transitions and exceptional visual effects — all supported with background videos. This can be done with Flash or HTML51, however, most websites incorporate background videos using only Flash. To enable the rich cross-device experience, it is worth considering adding fallback-videos for those users who have a browser that does not support Flash. Nevertheless, we didn’t want to go into technical details just yet and wanted to see what actual approaches designers take within their websites.

Further Reading on SmashingMag: Link

The performance of a website including a background video depends significantly on the speed of the user’s internet connection. Video backgrounds certainly do not fit in every setting; they wouldn’t be meaningful in online magazines or blogs. However, they can work really well in entertainment and certain corporate settings which are supposed to communicate artistic qualities, exclusivity, branding or even high quality standards. As you will see, they work very well in portfolio websites, fashion websites and promotional campaigns. Below you’ll find a showcase of good and not so good websites that implement this dynamic eye candy at full screen.

Fashion Websites: Clothes, Shoes, Jewellery Link

Bulgari B.Zero16
Bulgari, an Italian jeweller and luxury goods retailer, uses a background video to showcase (or “celebrate”) its new B.Zero1 line. Although the implementation is natural and done well, once again there is a strong potential for making the browser slow that would cause the website to run less than optimally. This may be the reason that Bulgari avoids using background videos on every page and use small versions instead; but then those videos feel underwhelming as a result, given the grandeur of the products being sold. The overall feel is very much like on DVDs, with interactive navigation menus, soft transitions and visually exceptional graphics.

Bulgari B.Zero1 in Background Video Showcase7

Uniqlock is an advertising campaign for Uniqlo, one of Japan’s largest casual wear retailers. By including the video dance routines, time-signal music and clock utilities, the designers craft a unique experience using the background video technique. This is a virtual 24/7 presentation of Uniqlo clothing done with creativity and style. It won one of six Black Pencils in the online advertising category at the D&AD Awards 2008 in London.

Uniqlock in Background Video Showcase9

Gudrun og Gudrun10
Gudrun og Gudrun is a hand-made clothing brand by two knitwear designers from the Faroe Islands. The designers use background video to showcase their fashion show, and they use it throughout the website, with subtle transitions via various elements. An interesting use case, even if somewhat taxing on some users’ systems. The site is a bit older than others, yet it still is interesting and attractive.

Gudrun og Gudrun in Background Video Showcase11

Jay Jays Dance/Off
Dance/Off is an interactive 3-D online catalogue for the new line by youth fashion brand Jay Jays. This website is truly exceptional in concept, but not so in execution. The 3-D approach is innovative but also makes the website (which is effectively a fashion ad) impractical. Without 3-D capabilities (and that would be most homes thus far), users would find the videos pixelated and visually unappealing. The interactive element is also conceptually intriguing, but with the long loading time and numerous instructions for using the website, most users would probably just move on. Besides, the page takes way too much time to load, even on the broadband connection. A nice touch: you can navigate the website using your keyboard.

Jay Jays Dance/Off in Background Video Showcase

Yves Rocher: Tout le Film12
“Ce qui est essentiel rend belle” is a promotional short video that anchors this website. The video challenges the taboo of sexuality at any age, highlighting its biological benefits. The rest of the website is subtle and stylistically simple, making it easy on system resources. The video doesn’t start playing automatically, but requires user to click on the large green “Play” button first. Simple and user-friendly.

Yves Rocher: Toutle Film in Background Video Showcase13

Louis Vuitton Journeys14
Louis Vuitton Journeys is an advertising campaign features three soccer legends, Zinedine Zidane, Pele and Diego Maradona. The intro to the video plays a little too fast to catch everything as it loads, but otherwise it is handled well. The video navigation and transitions are smooth, and the videos themselves are somewhat interactive.

Louis Vuitton Journeys in Background Video Showcase15

John Galliano16
John Galliano is a Gibraltarian-British fashion label; here, the video begins on the main page and takes over your sound and drains your system resources. The navigation is a little too fluid, making it difficult at times to quickly jump around to where you want to go. As you move deeper into the website, the background becomes less system-intensive, and each page opens in the current tab, freeing up the sound and CPU from the home page. The video introduction on the front page is interesting and not too obtrusive, but the music should not start automatically when the page is loaded.

John Galliano in Background Video Showcase17

Valentino is an international clothing company based in Italy. It does a much subtler and less intrusive variation on this technique. Although video elements play throughout the website (e.g. on the “Haute Couture” page), the home page does not automatically start a big video until you select one navigation item. And because you are prompted to begin the videos, your sound is not taken over until you decide. More user-friendly, better, cleaner design.

Valentino in Background Video Showcase19

Byblos20 (-> Runway)
Byblos is an Italian fashion house that uses video backgrounds very subtly. The splash page is a single frame, and sound runs continuously through the website unless you turn it off. But once you get past the splash page, the only really resource-sapping videos are limited to certain sections of the website, namely the “Runway” section. This feels like a more natural use of this technique; the whole website is not overly resource-dependent and prone to lagging on slow connections.

Byblos in Background Video Showcase21

Nike: M6
Jordan Melo’s sixth signature shoe by Nike is the subject of the background video featured here; it is a multi-part behind-the-scenes look at the new product design. Once again, there is a potential lag issue because the videos are very big and looped continuously. Rather than automatically transitioning from one video segment to the next, the website could just as easily have paused and prompted the user to move on, giving them a breath to digest what they just saw. Controls for pausing the videos are available, so the user has the option, but automatic pauses would have helped here.

Nike: M6 in Background Video Showcase

Anti Sweden22
Anti Sweden is a Norwegian fashion brand that subtly employs background video to complement its minimalist approach. Without the heavy graphics and sound that usually accompany this technique, the website is not as resource-intensive as some others, which is a nice change. The website demonstrates how the technique can be a lightweight yet completely engaging concept.

Antisweden in Background Video Showcase23

I Surf Because24
The “I Surf Because” site is part of Billabong’s digital marketing campaign. Here, Billabong uses a background video on the home page to push its campaign, but the technique is absent on deeper pages. This makes the website more CPU friendly, even though the embedded YouTube videos inside feel a bit lacking after the effect of the home page. An interesting idea: sometimes videos pause, show a tagline allowing for a comfortable reading and then continue again.

I Surf Because in Background Video Showcase25

Vibram FiveFingers26 (Be cautious: NSFW!)
FiveFingers is a shoe brand manufactured by Vibram, which has conceived an entire website driven by background videos. The execution is certainly interesting. With unique fluid navigation elements throughout the website, this interactive video features both the product itself and relevant data, making for a truly unique concept that is perfect for this technique. The splash page lets users choose if they want to see a normal site, a fullscreen site and if they are on low bandwidth connection.

Sam Edelman27
Sam Edelman, a fashionable shoe brand, shows that one can achieve certain level of interaction without videos. In this case, subtle animations are used instead of streaming videos. The overall website is understated, as is the tone and theme of the background video, which is nicely done. Also, no sound takes over your system, a refreshing change up till now. A nice alternative to video backgrounds.

Sam Edelman in Background Video Showcase28

Car Websites Link

Toyota Avalon
The promotional website for the Toyota Avalon is a fully interactive trip through five destinations and five of the vehicle’s features. The website creatively employs background video to some of its fullest and funnest potential. A promotional website which is essentially an interactive show-off with rich, creative, sophisticated imagery and navigation. Created by North Kingdom4329 (Stockholm, Sweden) in collaboration with Saatchi & Saatchi LA (Los Angeles, USA).

Toyota Avalon in Background Video Showcase

The official website for the Toyota Scion is another website where video background seems a bit underused. The website does not take over your sound to add to the video background, although numerous video transitions feel like they should have had sound; thus the videos feel lacking or somewhat broken in parts. Other videos open in smaller separate windows, once again feeling like a missed opportunity to employ the technique. By the way: the font size on the page is way too small.

Scion in Background Video Showcase31

Beverages And Food Websites Link

LemonAid is an organic drink made entirely of a few organic, fair-trade ingredients, and the company uses a retro-styled background video to tell everyone what it’s all about. On entering the main website, system resource usage goes up significantly, which for some users will mean a bit of drag on the video and sound. Despite this, the concept is fairly simple, and the implementation works well for the product. One major drawback: the font size is way too small.

LemonAid in Background Video Showcase33

Hennessy is a well-known French cognac brand. The video background gives this website a fitting elegance but with a twist. The video is resource-intensive in some areas and simpler in others. In both cases, the visuals are quite vivid and remarkable. Overall, a good, elegant fit for the brand.

Hennessy in Background Video Showcase35

Russian Standard Vodka36
Russia’s leading premium vodka is low key and unobtrusive with most of the information on its website; the main section automatically scrolls through a selection of promo material. The navigation is context-sensitive, being displayed only when users hovers over the menu. You can click on the video to pause it.

Russian Standard Vodka in Background Video Showcase37

El culto a la vida38
“El culto a la vida” is an advertising campaign for Havana Club, a brand of rum made in Santa Cruz del Norte, Cuba. Background videos are employed for several uses throughout the website. With everything from live footage to interactive elements, the videos fully complement the look and tone of the brand.

El culto a la vida in Background Video Showcase39

Tub Gin40
Tub Gin is a premium gin brand that uses video to humorously project its grungy and tough image while providing useful product information. Your CPU will take a bit of a hit as you peruse the various offerings, but given how entertaining the website is, you will barely notice it.

Tub Gin in Background Video Showcase41

Battle of the Cheetos42
Battle of the Cheetos is a promotional online multi-player game with a low learning curve, but still complex enough to keep users engaged. Notice how well various video-elements are incorporated in the Flash-movie, vividly inviting the users to join in. Developed by North Kingdom4329 (Stockholm, Sweden) and Goodby, Silverstein & Partners44.

Battle of the Cheetos in Background Video Showcase45

Asylum 626 is an advertising campaign for Doritos, which went with an interactive horror experience for this campaign. The “treatment” is available only between 6PM and 6AM and users can book an appointment to “participate”. According to the website, the experience is a scare that is too personal for the cinema. But for all the time required to go through the website, one ends up seeing little correlation between the product and these overproduced horror sequences.

Asylum626 in Background Video Showcase47

Amoy Food, one of the food and sauce brands in Southeast Asia, uses background video to complement its interactive promotional website. The site allows you to actually visually add ingredient and see them being prepared. Get ready to lose some time in the recipe-maker section, which is the highlight and focus of the campaign.

MyAmoy in Background Video Showcase49

Music And Dance Websites Link

White Lies50
White Lies is an alternative rock band from Ealing, west London, that uses background videos to play its music videos while the user browses the rest of the website. Designers have made a poor choice for the resolution of the displayed video: at large resolutions, it looks very pixelated and blurry — even a bit larger resolution would work much better. Most navigation actions do not disrupt the playing either, because external links open in new tabs, leaving the slightly resource-heavy video to continue playing. Also, even though the website is for a music band, the website opens with the sound muted by default, which is a nice change.

White Lies in Background Video Showcase51

Sick City Club52
Sick City Club is an indie rock quartet from Birmingham, England, that employs the technique of playing its videos while the user looks around. New content slides in from the side, never disrupting or creating lag for the video. This is somewhat unusual among the websites featured here, most of which have elements that are complex or resource-heavy. The elements here seem to be simple and lightweight, which suit the website well.

Sick City Club in Background Video Showcase53

Tomato Jaws54
Tomato Jaws is an electronic band from the Ukraine. It uses background video for ambience as the user engages with the unique navigation. The difference here, though, is that the music videos that play in the background are not necessarily theirs. In fact, in a bit of short-sightedness, the band’s music videos open in smaller players while the background video continues, thereby draining the CPU even more than necessary and causing both the music and background video to skip and drag.

Tomato Jaws in Background Video Showcase55

Arcade Fire: Neon Bible56
Canadian indie rock band Arcade Fire employs video backgrounds in a fun and unique way for its Neon Bible interactive music video. The website looks sparse at first and it features just a single music video, but with several interesting elements thrown in so that the viewer can sort of play along as the video plays. Still a bit heavy on resources, even for such a minimal approach, but that is to be expected.

Online Bible in Background Video Showcase57

Radio Soulwax
“Part of the Weekend Never Dies” is a documentary about Radio Soulwax’s summer 2006 tour, filmed by director Saam Farahmand. The website features a particularly creative use of background video: it enables the user to create their own mix by triggering various loops and video clips from the click of the mouse. While resource-intensive, it is an interesting use case.

Radio Soulwax in Background Video Showcase

Destroy Rankin
To celebrate Youth Music’s 10th birthday, 70 of the world’s greatest musicians and visual artists have created a groundbreaking body of collaborative artwork based on Rankin’s iconic portraits of musicians. Simple, artistic and a worthy complement to the photographer’s work.

Destroy Rankin in Background Video Showcase

1001 Attitude58
1001 Attitude is a dance school in Montfermeil (Paris) that uses background video to show its students dancing and, at times, warming up. This is a good use for a dance school, but the video is stretched to fit the background and so becomes distorted, which is unfortunate because it detracts from the elegance of the effect.

1001 Attitude in Background Video Showcase59

Random Dance60
Random Dance, an internationally renowned British dance company, puts background video on full display on its home page. As you move deeper in, a smaller video player is used, which fits the flow and structure of the website.

Random Dance in Background Video Showcase61

Hotel, Restaurant, Bar and Nightclub Websites Link

“On vacation, we’re all stars” is the slogan for the Iberostar Hotels & Resorts campaign featuring Antonio Banderas. A partly interactive background video walks you through a virtual tour of what your actual experience at a resort would be like. The tour is an interesting way for hotels to deliver this experience.

Iberostar in Background Video Showcase63

The Wood64
The Wood is a brand new bar/restaurant in the heart of Brussels and the famous “Bois de la Cambre.” The designers use background video to craft a soft atmosphere, which seems to fit the feel and decor of the restaurant in its unique woodsy way. The navigation plays into the rest of the website’s structure wonderfully, tying together the whole experience.

The Wood in Background Video Showcase65

Jazzownia Liberalna66
Jazzownia Liberalna is a music club and restaurant that uses this technique in a stylish way. Adding various elements outside of the menu, the owners have gathered a lot of information on the history of jazz and displayed it in an simple interactive timeline of sorts. The rest of the website appears fluidly over top of the video. Breaking from the background once or twice might actually help here.

Jazzownia Liberalna in Background Video Showcase67

Byblos is a dance club in Porec, Croatia. It uses video background not only to show footage of the club itself, but to establish the tone and attitude of this hotspot. The website is hard on the system, but you are told that from the start, so be prepared. The transitions and overlays fit right in with the background, and they work well together and don’t detract from each another.

Jazzownia Liberalna in Background Video Showcase69

Advertising, Design Agencies and Film Studios Link

Razorfish is an interactive agency for marketing, experience and enterprise design. Its use of background videos is both subtle and nearly unobtrusive in implementation. With minimal sound and graphic-heavy inclusions, the website is smooth and fluid throughout.

Razorfish in Background Video Showcase71

Less Rain72
Less Rain is a digital creative agency with offices in London, Berlin and Tokyo. Its site uses background video to complement the ambience of the rest of the website. However, as on other websites, the videos in the gallery open in a separate player, rather than in the background (where the main video stops playing). With the kind of work being showcased, a bigger presentation seems more suitable.

Less Rain in Background Video Showcase73

1stAveMachine is an NYC-based CGI, visual effects and animation studio that uses video background to enrich its website experience. Video sequences that play in the background do not always complement the navigable elements; they make the content displayed over top of it illegible in many instances.

1stAveMachine in Background Video Showcase75

IDEAL Production Company76
Ideal Production Company is a motion-design studio from Warsaw, Poland, that uses an interactive navigation element to enhance the background video employed throughout the website. This navigation also seems to be the reason that most videos on the website play in a smaller separate player. Still, given the nature of these videos, the smaller presentation does work here.

IDEAL Production Company in Background Video Showcase77

BlackBeltMonkey is a German communications and interactive design agency that has a subtler variation on background videos. While adding unique and whimsical interactive elements, the designers manage to keep the background from interfering with the content almost perfectly. There are some instances of text and background colors matching, rendering some of the headings partially illegible.

BlackBeltMonkey in Background Video Showcase79

Marketel, one of the largest advertising agencies in Quebec, Canada, uses background video and with a responsive hover element to boot. The stylish background adds sophistication, and it remains active during all of the other interactions on the website. But when the television ads run in the gallery, the background can create a heavy lag for some users.

Marketel in Background Video Showcase81

Designkitchen is an interactive design agency that delivers award-winning digital branding across multiple channels: social, viral, mobile and Web. It uses background video throughout its website, with various supplementary videos depending where you navigate to. The videos, especially in the news section, repeat themselves (sometimes alternating, but rarely) making them a bit distracting. Also, the portfolio has some white text against a white background, creating some difficulty there as well.

Designkitchen in Background Video Showcase83

Lukas Lindemann Rosinski84
Hamburg-based advertising agency LLR (Lukas, Lindemann, Rosinski) also takes a minimalist approach with this technique and its overall website. With their unique and responsive navigational elements, the designers instill a sleek yet stylish feel throughout the website and leave a lasting impression.

Lukas Lindemann Rosinski in Background Video Showcase85

Working Element86
Working Element LLC is a collective made up of directors, photographers, writers, compositors, editors, photo illustrators, designers and cinematographers. The site uses background video to show the truth of its name. But as the large still gallery opens up, the video continues to play behind it, feeling a bit overstimulating. Again, the idea has promise but could use some tweaking.

Working Element in Background Video Showcase87

Metaproject is a creative agency based in New York. Its background video is in some ways subtler and in other ways grander than others we’ve seen, but never intrusive or distracting, which is not always easy to achieve as we have seen. The transitions are smooth, and the background varies with the pages and projects in the gallery.

Metaproject in Background Video Showcase

Media Novak’s background video is handled impressively, with little overstimulation. But it drops the ball in the portfolio section. The background fills with a wall of thumbnails, but it scrolls too quickly at times depending on the position of your mouse. There is no resting point. When you open a window, the wall continues to scroll behind it, which can be distracting or unpleasant for some users.

MediaNovak in Background Video Showcase89

Filmhouse is a film production studio that uses a combination of background video techniques throughout its website (ranging from moderate to heavy use of system resources as well). As on other websites, this one opens up the videos in its portfolio in smaller windows, even shutting down the background entirely. But after the grand tour of the facility in the background, these smaller portfolio pieces feel a bit underwhelming.

Filmhouse in Background Video Showcase91

About:blank uses this technique harmoniously throughout. With the fluid, smoke-like effect playing through a halftone overlay in the background, the website comes across as sleek and well crafted. And the fact that the video continues to play without impeding the readability of the text over top of it shows how well this effect can be implemented with such simplicity.

about:blank in Background Video Showcase93

BM8 Bildmacht is a Hamburg-based film production studio that uses background video in two distinct ways. First, you can play with its portfolio of projects, which opens in the full browser window; and once you enter the website, the background is a continuously flowing video that entertainingly introduces you to the company. The videos are also available as lightboxex, so you can skip to specific parts or simply let them play through.

BM8 in Background Video Showcase95

From Scratch Design Studio96
From Scratch’s background video is heavy and as results it often causes problems with navigating the website. However, the implementation here shows some interesting ideas. For example, while the videos in the portfolio section open in smaller windows, separate from the page, they do not feel like a break in the flow of the website. The transition feels like a natural fit.

From Scrath Design Studio in Background Video Showcase97

Hipopotam Studio98
This small talented design studio of two people from Warsaw, Poland, implements this technique site-wide. Thus, the lag factor can get a bit much at times. However, when viewing projects in the portfolio, system usage drops rather significantly; even though video is used here, it is done in a subtle yet still interactive way.

Hipopotam Studio in Background Video Showcase99

9elements uses background video for its main website and all accompanying material but abandons it on its blog. The background on the main website does not distract in any way from the content displayed over top, which is nice to see. Fluid transitions make for less chance of video disruption.

9elements in Background Video Showcase101

GSDH Werbeagentur102
GSDH’s background video is very subtle, almost imperceptible. Whereas many sites displayed above use the technique as a focal point, here it serves simply as the background, and without interfering with the content, as a background should.

GSDH in Background Video Showcase103

Further Examples Link

We Choose the Moon
We Choose the Moon is a real-time immersive, interactive website for the John F. Kennedy Library and Museum. It commemorates the 40th anniversary of the Apollo 11 mission, the result of JFK’s pioneering vision to land the first person on the moon. Background video is implemented so that the user can track the entire mission through its various stages, with interactive stops and elements added along the way.

We Choose The Moon in Background Video Showcase

Lost in Val Sinestra104
The Lost in Val Sinestra is a viral marketing campaign by Swisscom to promote its TV offerings. It allows users to create a personalized movie trailer starring their Facebook friends or with pictures uploaded from their hard drive. The website adds interactivity by allowing users to choose their cast and the thrill-level for the story. To get the most out of the experience, use a big cast.

Lost in Val Sinestra in Background Video Showcase105

Philips: Cinema
Parallel Lines is a Carousel short-film project to promote Philips TV sets. The films explore the most popular genres of filmmaking — including drama, action, animation, sci-fi and thriller — a nice examples of a site using video to provide a very memorable, rich user experience.

Philips: Cinema in Background Video Showcase

Neave Television106
Neave Television uses background video to present a truly original and entertaining concept. A series of seemingly context-free, weird and bemusing video clips are presented one after the other, allowing the user to skip to the next clip with the click of the mouse.

Neave Television in Background Video Showcase107

MTL12 is a documentary television series (12 episodes) about Montreal and the people who live there. A stylized and interactive take on the background video technique gives this website its unique look and feel, highlighting the project and its segments in the process.

MTL12 in Background Video Showcase109

Newturn Group’s Webart Exhibition110
The first online art exhibit website of the Newturn Group streams resource-heavy background video leading up to and following the event. However, the videos can lag a lot and be at times unwatchable. The website gets a bit lighter once you start browsing around and move away from the main videos.

Newturn Group's Webart Exhibition in Background Video Showcase111

Aaron Ohlmann112
Aaron Ohlmann is an editor, producer and documentarian with an interest in projects that focus on the arts, political structures and social architecture. His website has a scaled-back, resource-friendly background video. But given the appearance of the home page, we expected to see each project in the same format; unfortunately, the other videos on the website open in a smaller player.

Aaron Ohlmann in Background Video Showcase113

Yodabaz is the portfolio of Basile Tournier, co-founder of Web creation studio FCINQ. Once more, we have a main background video element that acts simply as a background, with the website’s other elements seamlessly laid over top. The background is integrated into the website without any interference or lag.

Yodabaz in Background Video Showcase115

EagleClean is a specialist cleaning company based in Central London that takes a subtle, minimalist approach with both its website and background video. It effectively markets its services with quick, once-over cleanings now and again to clean up any smudges on your screen. A creative use of the technique.

EagleClean in Background Video Showcase117

Wim Vanhenden118
Wim Vanhenden is a creative Internet artist from Belgium who uses background video not only to highlight his previous work, but to enhance the art project built right into the website. Upon prompting users to type in their thoughts and other information, the website searches the Web for related images and morphs them into an artistic background slideshow.

Wim Vanhenden in Background Video Showcase119

Futuretainment: Yesterday the World Changed, Now It’s Your Turn is a book written by Mike Walsh. Background video is used somewhat obtrusively on the website, looping repeatedly through a series of short segments. The segments themselves are so repetitive that they become distracting, and most of the footage is grainy and pixelated which is not a good thing.

Futuretainment in Background Video Showcase121

Walt’s Warning
Walt’s Warning is a first-person interactive experience website from Sony Pictures for Breaking Bad. Using background video to suck the user into the show’s world, the designers add another element of interactivity with responsive mouse-over scrolling. Overall, the experience is short-lived and a bit high on the resource-sapping end of the spectrum.

Walt's Warning in Background Video Showcase

What Do You Think? Link

As you might have noticed, this article doesn’t really go into details explaining how to actually implement cross-browser video backgrounds in Web design, but if you’d like to have it as a follow-up, please let us know in your comments below.

Also, in general, what is your opinion of background videos in Web design? Do you think that it makes sense to use it? If yes, in which particular designs? If not, why not?

Poll: Would you like to see a HTML5 (or Flash) tutorial on creating video backgrounds in web design as a follow-up? Link

Would you like to see a HTML5/Flash tutorial on creating video backgrounds in web design as a follow-up?customer surveys122

(al) (ik) (vf)

Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45
  46. 46
  47. 47
  48. 48
  49. 49
  50. 50
  51. 51
  52. 52
  53. 53
  54. 54
  55. 55
  56. 56
  57. 57
  58. 58
  59. 59
  60. 60
  61. 61
  62. 62
  63. 63
  64. 64
  65. 65
  66. 66
  67. 67
  68. 68
  69. 69
  70. 70
  71. 71
  72. 72
  73. 73
  74. 74
  75. 75
  76. 76
  77. 77
  78. 78
  79. 79
  80. 80
  81. 81
  82. 82
  83. 83
  84. 84
  85. 85
  86. 86
  87. 87
  88. 88
  89. 89
  90. 90
  91. 91
  92. 92
  93. 93
  94. 94
  95. 95
  96. 96
  97. 97
  98. 98
  99. 99
  100. 100
  101. 101
  102. 102
  103. 103
  104. 104
  105. 105
  106. 106
  107. 107
  108. 108
  109. 109
  110. 110
  111. 111
  112. 112
  113. 113
  114. 114
  115. 115
  116. 116
  117. 117
  118. 118
  119. 119
  120. 120
  121. 121
  122. 122

↑ Back to top Tweet itShare on Facebook

  1. 1

    Nicholas Hammond

    January 6, 2011 7:24 am

    As all of the sites provided were really cool and attention grabbing because of the video that they incorporated I almost feel as though that’s the downfall of the sites as well; at least in my opinion.

    When I go to a site I am normally there for a reason and when I cannot control what is being shown on the screen it almost gets a little annoying. If I wanted to click on a video in the first place its nice to have a link or a video post somewhere as additional content that I can click based on my own discretion.

    Kinda goes back to the whole “don’t have self playing music” on a site because it will distract potential viewers and they’ll want to leave. I feel the same way with video. So lets get past the “cool” aspect and realize that flashy doesn’t always help.

    Definitely an awesome post though. And props to whoever gathered the MASSIVE amount of sites that went into this post. Much appreciated :D

    -Nick Hammond

  2. 2

    Excellent article! Well written and researched. I especially enjoyed browsing through the Philips Cinema website

  3. 3

    Sorry, basically all of these sites are quite failed to me. Not only do they use full-window flash, or fullscreen flash, but none of them have a proper fail-over version. Try using your Ipad for example. The brands will be presented by a grey background and a text saying “Please use Internet Explorer” or some other dumb text.

  4. 4

    Nice article, but with a common mistake on the Anti Sweden brand. The Anti design agency are located in Oslo, Norway (not Sweden). Cheers

  5. 6

    For an extremely innovative integration of video on a site, check out Holden Outerwear –

    • 7

      Adrian Tschubarov

      April 7, 2011 12:52 pm

      hahaha you didn’t understand the topic of the article!!! Nice site btw.

  6. 8

    Interesting article & good research ! Now, it seems like you’re gonna have to make this tutorial :D !

    Little thing : Uniqlo is not only one of the largest, but the largest clothing retail chain in the country ;)

  7. 9

    Omg that JayJay site took FOREVER to load… :/ After that first loading bar… you have to wait for yet another loooong one to actually see the dancers.

    • 10

      Sergiu Naslau

      January 6, 2011 10:45 am

      doesn’t matter, because the experience and the new model of selling is priceless.

    • 11

      Load time isn’t that long really, considering the content. And to SmashingMag/Author – “Without 3-D capabilities (and that would be most homes thus far), users would find the videos pixelated and visually unappealing” – firstly, the 3D can be toggled on/off allowing for very appealing video and by capabilities do you mean cardboard glasses with red and blue cellophane? I’m pretty sure my 3 year old has those “capabilities” in his craft box.

    • 12

      Completely agree with AJ on this one. And I wasn’t impressed with the site after that either. Waste of bandwidth.

  8. 13

    I actually built something like this a few years ago – the most difficult part is making sure the video will always playback OK on machines that aren’t quite as speedy. Will definitely reconsider HTML5 for non-Flash users in my next experiment!

  9. 14

    Lots of eye candy! The potential for great design is there. Video backgrounds are very cool, but the main issue with many of these sites is that the video feels like a gimmick. I did not click on all, but I dig the way the video on The Wood site added to the experience instead of screaming “look at me”

    And the Holden Outerwear site was great too.

    Great article, thanks for putting it together.

  10. 15

    I think video backgrounds done well are great. But this has the potential to be a too for evil. :)

    I wrote a jQuery plugin that inserts a YouTube video in your page as a background. It’s a very young project so it’s bare bones and might not work with all situations:

    • 16

      I had a look, at Chicago River time laps. Very competent, can I use this with html5, no flash ??

  11. 17

    great post. Thank you smashing magazine ;)

  12. 18

    Great stuff! Another visually interesting without being to flashy use of video is done by Coolfire Media – creators of the Vibram site. Check it out.

  13. 19

    Are there any sites featured here that do not rely on FLASH to hold their video content? (HTML 5, anyone?) Y’all know that FLASH is by-and-large not a supported mobile platform? Do you know what FLASH sites end up looking like on mobile devices? (See Andy’s post above.) Why do so many designers believe that humanity should bend to their vision, instead of articulating humanity’s vision?

    • 20

      Your comment about why do so many designers believe that humanity should bend to their vision can also be applied to the likes of Apple and the iPad since they refuse to support Flash. Flash isn’t as evil as a lot of people make it out to be. It’s the implementation of the flash that is usually bad.

      Personally I think the sites were pretty cool but it would be better if they all provided some kind of fallback like a still jpg background for people that use such devices as an iPad.

    • 21

      9elements use HTML5 for their video background.

      The main goal of the article was to show that video backgrounds can help you create a visually appealing and highly interactive user experience and can work really well in some cases: portfolio websites, fashion websites, promotional campaigns, etc. After all, it’s your choice which technology you’ll use behind a video background in your own project! ;)

      P.S. Feel free to use any Android-based devices to have a Flash support ;)

    • 26

      What, there is still Flash content in modern web? Whoa now i’m confused because Steve said that html5 is the only truth I am allowed to believe.

  14. 27

    Can any moderator delete the two stupid trolling comments of Andy and TMacFarlane ?(including mine after cleanup then)

    This post is a roundup of nice flash video background sites, not a playground for horny fanboys haters that don’t EVEN consider these websites weren’t made for Ipad or mobile nor that the purpose of it had any interest.

    (They will probably email spielberg to say that avatar doesn’t look good on their small iphone screen, he should have make paper stop motion for the movie to look better on mobile devices)

  15. 28

    Please write a followup as to implementing videos as backgrounds! Thanks!

    • 29

      I agree with this. I’m just starting to learn Flash and I also hope to learn how to do video with HTML5 in the near future as well. It would be nice to see how to implement video as a background with either Flash or HTML5.

    • 30

      In combination, I recommend checking out these two sites as a primer, if you want to incorporate HTML5 video as a background: – for encoding the video to fit HTML5 video – although the code they use for “position” is absolute, I might use fixed for that instead…

      Basically use those in combination with existing knowledge of CSS/HTML and you should be able to work your way towards a video background.

      • 31

        The link you provide is no available. If you know some other place with tutorial, please let it know? Thank in advance.

  16. 32

    Hi, good stuff. I give you one more link:

    I really ike this website… it’s in spanish.

  17. 33

    Wow, I love it. Background videos please!

    Check out for some really interesting takes on this. The tools and resource some of the latest and best.

  18. 34

    loved the article… Great Read.. Didn’t know there was so much involved in background videos in Web designing.

  19. 35

    Can’t wait for Flash Molehill to be out to kick some html5 butt =P
    Nice showcase, very impressive sites!!

  20. 36

    The guys at BONFIRE Snowboards have the slickest looking site with video I believe; plus their site doesn’t have any speed lag because of it.

    I tried something similar on my own website –

    • 37

      awesome site you did! enjoyed your photos as well!

    • 38

      Hi Sean,

      ironically both your site and that of bonfire works flawlessly and yes, as you so mentioned, loads quite fast as compared to some of the sites higlighted in the article.

      Mind sharing some tips/techniques on how you did it?

      I also noticed that the background degrades gracefully as well – in absence of Javascript, the background turns to diamonds – cool!


    • 39

      Sean – your site looks great! Would you mind sharing how you did it? Would be a great help – and not just to me by the looks of it :)

  21. 40

    Great article. Would love to see more collections of this since the future of entertainment seems to be merging a lot of the entertainment/video/web/social elements into one beast.

    Nice collection, thanks for more inspiration.

  22. 41

    How about not posting pornographic video links on Smashing Magazine.

  23. 42

    Very interesting article

  24. 43

    Rickard Westerlind

    January 7, 2011 3:56 am

    Another cool background video,

  25. 44

    laura guazzaroni

    January 7, 2011 4:20 am

    Thank you for our mention in the article.
    We are trying to move the old Valentino fashion house to the future!
    If this is happening in the offline world with he new collections it is also happening in the online world too.
    The new website it is only one of the main steps that need to be taken in order to achive that resut.


    Laura Guazzaroni
    Web Project Manager @ Valentino S.p.A.

  26. 45


    January 7, 2011 5:03 am

    i only say great its help me a lot

  27. 46

    Usability in Minneapolis

    January 7, 2011 11:39 am

    This is a great article for inspiration and it’s fun to see people pushing outside of the box. However, it’s worth noting the usability of most of these sites is quite poor. All the pomp and circumstance isn’t worth much when the website is difficult to use.

    • 47

      “usability of most of these sites is quite poor”

      Exactly what I was thinking. Nice as an artistic sorta thing, but for most sites would defeat the whole point of having a site in the first place. What good is all this if people can’t figure out what your product is?

  28. 48

    How about a video bg on a wordpress site?! :D
    (it’s there, hit refresh a couple of times)

    It was all flash videos for the bg in the beginning, but i got feedbacks like “it slows the browser…” so…
    (also has a few problems on IE and Safari, but i’m working on it :P)

    • 49

      good old times :) it proved to be too much for browsers… i think the new web design i made is much better. Y’all have a look.

  29. 50

    For the record – the Ideal Production Company identity and website was conceived and created by Bitter Lix Studio : It was not client-made, as may seem from reading the article. Proud to be on the list, thanks for mentioning the work!

  30. 51

    and how about the web site of Marilyn Manson where video is its priority

  31. 52

    Nice article, yes it would be great to see a follow-up that goes more into how to create the video backgrounds in flash and html5. Keep up the good work. Thanks

  32. 53

    Hey Smashing community :)

    All the sites that are here look amazing !
    i got some inspiration out of it and design my site with a video

    i would to get some feedback from all the smashing community :)


  33. 54

    Amazing Compilation! Inspires me to create mine

  34. 55

    Jian Adornado

    January 9, 2011 12:53 pm

    Great site! This is one of the best example of video walk-ins on a website. Normally walk-ins on website are obtrusive but this site did a great job.

  35. 56

    If your looking for video walk ins check out they are the best in Australia

  36. 57

    How come that web which loades in more tham minute and half gets the FWA? Flash websites suck with their loading anyway =)

  37. 58

    Some great sites here and would be extremely interested in seeing a more in-depth article about how to best go about delivering a video background using HTML5 techniques. This is a site our company put together just over a year ago for Dromoland Castle Hotel in Ireland using Flash –

    Would love to hear any feedback and see any links RE: encoding raw HD video to deliver the best quality on the web / the appropriate screen resolution to cover both large and small monitors / dedicated Media Servers vs. Hosting the video on the same server as the website, etc. That Louis Vuitton Journeys site has some of the sharpest quality I’ve seen to date.

    Thanks again for a great article!

  38. 59

    Cant believe you missed

    Contains several awesome random background videos. You may need to refresh a few times to see them all.

  39. 60

    I don’t want to spend the rest of my life waiting for pages to load. These guys need to learn to cut back on the bandwidth.

  40. 61

    I got some inspiration from this site: nice retro commercial (Tide)

  41. 62

    amazing collection. You’re always finding interesting websites. Thanks

  42. 63

    Literally I went to 5 of these and only one worked. I’m on a super fast connection here and normally have no issues but for some reason, the videos just did not work or took at least 7 minutes to load. I’m intrigued, but I’m too annoyed to even try to look at any others.

    • 64

      Gerry Straathof

      February 3, 2012 5:38 am

      sites that use large scale hosting services for the videos (like youtube or vimeo) will probably provide better access than a site that hosts their own. The difference between using the closest of several dozen servers versus one server only, which could literally be halfway around the world from where you are.

      So, if you are visiting a self-hosted site in sweden from your home base in tampa, florida… you will no doubt experience delays.

  43. 65

    very inspired =)

    thank you

  44. 66

    Here is another nice example – not that spectacular, but very sweet and likeable:

  45. 67

    shawn koppenhoefer

    January 11, 2011 4:20 am

    Interesting and rich article.. THANK-YOU!

    I would love to see something similar on video-use in websites-built-for-iPad. Most of the sites you mention are laclustre when it comes to that platform; So who is standing out in that domain… And how?

    I recently had to add a video section to our research web-page using Jquery + Flash to get a lightbox effect, and Jquery + notFlash + YouTube-versions of the videos. Our goal was to fall-back to an exceptable almost-identical solution that still worked on iPads.

    Are other people finding solutions

  46. 68

    Great post – video still has a smash you in the face impact that’s hard to deliver with stills. We used a loop on this site’s home page to minimise file size but still give the “video” experience to the user.

  47. 69

    Great showcase. I’d love to see a tutorial on how to do this in HTML5 falling back to Flash.

  48. 70

    Awesome sites – thank you! -Can someone please point me towards a tutorial on how to do this?

  49. 71

    Antoine Lefeuvre

    January 13, 2011 1:59 am

    Thanks for these great examples of video integration.
    Since you talked about dance, I’d like to show one of our sites also featuring background videos.
    The video shown changes depending on the page being read: the ‘shows’ pages for instance include videos from the dance companies Hope you’ll like it!

  50. 72

    I think this is a very good idea, special webs can do it, but, how is the quality for the bad conection users? I would put in and i think this good for posible clients.

    Thanks very much.

  51. 73

    A MUST SEE SITE: You all should definitely check out the design agency in Los Angeles I love how the site is all HTML, but feels Flash. (Homepage video is in Flash – only)

  52. 74

    A better title for this article might have been: “Creative Use Of Background Videos in Web Design Using Flash”.

    It’s like someone wound the clock back 3 years – not one of these sites ran on ANY of my devices; mobile or desktop.

    Smashing Magazine purports to “inform… readers about the latest trends and techniques in Web development”. Any one of these examples could’ve been written in HTML5. Why not feature some that do?

    (Note: avoiding Flash isn’t a principled or religious stance, just a practical one. My browser crashed regularly until I removed it and, just like hundreds of millions of others, none of my mobile devices support it. In 2011, is there any excuse for building a site that doesn’t work without Flash?)

    • 75

      Have to agree. I wonder if these can be done with HTML5 and how Google see’s these with so much leveraging on load times these days. Seams more like a site design popular from a decade ago. I’d be curious to know how these do in search?

  53. 76

    Love the site examples and can’t help but wonder in 2011 where WP/CMS sites and SEO is king… How do these sites page rank? With lack of Flash support on so many Apple products and HTML5 still in early stages of adaptation how can these sites do well in search? Especially with Google putting value on load times these have to fall short.

    Still… love the interactivity and WOW factor! Just maybe not a viable option for driving mass amounts of traffic from search. Maybe their making up for it in viral links from “cool site” hunters referring links? Still, after the initial hit and a couple links how can these sites survive?

    I’m not bashing. I’m honestly curious to know if these types of sites can survive in todays web age? And if so… HOW!? Because I want to make one just like it if that’s the case.

  54. 77

    Some fantastic examples here – in both the main article and the comments.There doesn’t seem to be any links to tutorials though so if anyone knows of any I would really appreciate you adding them.
    I am trying to develop a single “coming soon” landing page with video background and some basic text overlay. Not that bothered at this stage whether it is done in HTML5 or Flash – just needs to look good, load quickly and run seamlessly.

    Also – in terms of the actual ‘video’ content – are there any particular specs that need to be borne in mind?
    Advice much appreciated – am new to a lot of this :)

  55. 78

    Wow, loads of flash, poor navigation, I didn’t even bother with all of them.
    So much self indulgent stuff here, it looks pretty, then you wait for loading….yawn

  56. 79

    Studio WebDesign

    February 13, 2011 7:12 pm

    nice collection. You’re always finding interesting websites. Thanks

  57. 80

    Jeffrey Gochman

    February 15, 2011 6:43 pm

    I just experimented using video on my portfolio in the background. Not sure how I feel about it yet but I feel that it gives off a unique look. Check it out:

  58. 81
  59. 82

    Anyone knows of a background video done with CSS3 and HTML5 ?

  60. 83

    Guilherme Albuquerque

    March 1, 2011 11:27 am

    Another amazing use of videos in websites by AXE Japan:

  61. 84

    I published some code showing how to achieve fullscreen backgrounds in HTML5 video here:

    -Drew Baker

  62. 85

    extensive blog you corner

  63. 86

    Awesome collection. Keep up the good work :-)

  64. 87

    It’s been a year since the written of this article, any tutorial has been written yet? Please update!

  65. 88

    I like the new look of the html5 vedio player Player is faster is better and my slow computer with crappy video card will not got slow anymore, nice job you guys!

  66. 89

    Awesome collection. Bookmarked!
    Youtube interactive Video Website Interesting where annotations are used to navigate through pages.

  67. 90

    I really like this site done by BKWLD – Surprised it wasnt included.

  68. 91

    Does anyone have information on the ROI factors of background videos? Increase in visits to say a location / destination vs commerce? Increases in web traffic perhaps? I could use the details oh, yesterday. Please email me if you have info or links to info. Thanks!

  69. 92

    All of the sites are very nice.

    I would really like to add in the mix.


  70. 93

    How about a source for HD Video Backgrounds.


↑ Back to top