Line25

Web Design Trend Showcase: Big Video Headers

Read the full post

Following on from my recent showcase of websites featuring full screen videos, today’s post looks at the sub-trend of big video headers in web design. HTML5 and jQuery make it easy to add dynamic video content to your site without bogging down the browser with Flash. This means designers can start to play with video as part of a website design as well as its content. This post showcases some great examples of video background headers, followed by some links to help you create the effect yourself.

Risk Everything

View the website

Exponent PR

View the website

Numbrs

View the website

Hover Studio

View the website

Facebook Home

View the website

G-Star The Art of RAW

View the website

Dadaab Stories

View the website

BKWLD

View the website

L’attrape rêve

View the website

Video Background Tutorials

HTML5 Video and Background Images

View the website

Responsive HTML5/CSS3 Video Background In div No Javascript Needed!

View the website

How To Build a Fullscreen Background Video Player

View the website

Full Width HTML Video Background Tutorial

View the website

Video Background jQuery Plugins

jQuery.videoBG Plugin

View the website

BigVideo.js

View the website

MaxImage 2.0

View the website

Tubular

View the website

jQuery Video Background Plugin

View the website

Free web shadows pack for every subscriber

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of realistic web shadows.

Written by Chris Spooner

Chris Spooner is a designer who loves experimenting with new web design techniques collating creative website designs. Check out Chris' design tutorials and articles at Blog.SpoonGraphics or follow his daily findings on Twitter.

  • http://www.geneticamultimedia.com genetica multimedia

    great sites but… 1) not all are responsives 2) i’m gettin disappointed about the non compatibility yet of ‘object fit’ parameters on standard modern browsers. Is it possible in 2013 that a browser cannot stream a video fitting his position to monitor? Would like to know more thought about it….

  • http://www.graphicdesignblender.com/ Preston

    Loving these. A great follow-up post would be something geared toward the how-to or best practices for implementing on your own site. Thanks for sharing, Chris.

  • http://aviatstudios.com/ AviaT-

    Now that’s a trend I really like! Wonderful how it contributes to the overall feel of the site. I’ll have to give one of these tuts a try.

    Thanks for posting these.

  • http://pixel2pixeldesign.com Suresh

    This is a trend going on for today’s most of the website. Even i publish one similer post on Websites Featuring Video as a Background. http://pixel2pixeldesign.com/websites-featuring-video-background/

  • http://www.geniuswebvision.com Thushyantha

    Really nice post and designs. actually this is the new trend sites.

  • http://sky-tech.pl Sky-tech

    I like the way facebook and numbrs did it. Those trends are really viral.

  • http://www.enricotamburini.it Siti Web Udine

    Some of those are really emotional!

  • http://www.easy-pixel.com/ Easy-Pixel

    tolle sache, gelungener beitrag.

  • http://www.brandonmcook.com/ Brandon

    Don’t forget about Spotify – http://goo.gl/oyknV

  • http://www.newbrandvision.com/Websites/ Paul

    http://www.dadaabstories.org/ is a great site; and really hits home with the message they’re getting across. Good web design!

  • http://www.wachiwi.com Designer totes

    I also think That designers can start to play with video as part of a website design as well as its content. .
    I am really impressed to read this innovative post and I would like to give a special thank to the author to share this innovative and creative post with us,

  • http://www.20milesnorth.com Rob Jenkins

    pretty smart how Risk Everything turns to static images instead of the video for mobile to reduce load time.

  • http://www.spiderwebdesigns.com Spider web designs

    Great, actually i have seen these pictures and really appreciating them.

  • http://www.netprofitmarketing.com Jared

    This is a good idea when the video content is good. I’ve seen some sites do this and the videos were terrible.

  • http://www.multyshades.com/ Multyshades

    I think video is widely used in today’s web design and it is one of the most powerful tools of visual communication.

  • http://resultplanet.org Samir

    great Idea & good Concept i will suggest my friend to follow this for his website.

  • http://www.enricotamburini.it Siti Web Udine

    I wanna work in London (HOVER STUDIO) ;)

  • http://webdesign.ducktoes.com Ducktoes Web Design

    Very interesting, thanks for sharing!

  • http://www.wish111.com Matthew

    The websites look great with the full screen video,I’m wondering do they move in search engines due to minimal content on home page?