{"id":139691,"date":"2016-06-14T11:00:59","date_gmt":"2016-06-14T11:00:59","guid":{"rendered":"https:\/\/getflywheel.com\/?p=17601"},"modified":"2024-06-30T15:17:42","modified_gmt":"2024-06-30T20:17:42","slug":"a-few-things-to-think-about-before-using-a-full-screen-video-background","status":"publish","type":"resource","link":"https:\/\/wpengine.com\/case-studies\/resources\/a-few-things-to-think-about-before-using-a-full-screen-video-background\/","title":{"rendered":"A Few Things to Think About Before Using a Full-Screen Video Background"},"content":{"rendered":"

Looking for a web design<\/a> feature that delivers massive impact with a hyper-cool appeal? Consider the full-screen video background.<\/p>\n

The full-screen video background is a really neat trick (when it\u2019s done well). But how do you know if it\u2019s the right feature for your site? Let\u2019s break down some of the reasons they\u2019re great, \u00a0and some of the reasons they can be not-so-great.<\/p>\n

Why You Should do a Full-Screen Video Background<\/h2>\n

Web design is a visual art and if you\u2019re going for visual impact, there\u2019s nothing like a full-screen video background. It\u2019s captivating from one edge of the frame to the other, and nothing else out there has that kind of impact. You want your design to stand out, after all. When they\u2019re done well, they\u2019re absolutely stunning.<\/p>\n

It\u2019s also much easier to set one up these days, thanks to HTML5. Whether you code it or use a plugin, it\u2019s a much more accessible design feature now than it used to be.<\/p>\n

Videos work great on sites that would otherwise employ a pretty minimalistic, slimmed-down design. If you have a project that might lend itself to a design with a reduced number of visual elements on the homepage, you may be dealing with a great contender for a video background.<\/p>\n

\"<\/p>\n

So what are some ideal applications for video backgrounds? In a quick survey of video background sites, I saw quite a few set up for artists and musicians, studios and agencies, and even a few (perhaps less successfully designed) storefronts. Video backgrounds work great for single-purpose site pages — things like login or registration pages, landing pages, or splash pages. They make a great \u201cdoorway\u201d of sorts to the \u201creal content\u201d of the site. Video backgrounds convey a sense of mystery, artistry, and individualism, among other things. There’s a lot you can play with\u00a0if you’ve got the right project.<\/p>\n

Why You Shouldn\u2019t do a Full-Screen Video Background<\/h2>\n

[article id=”6317″ align=”right”]<\/p>\n

While I happen to like a nicely done full-screen video background, there are definitely times when it doesn’t make sense. In fact, for many websites, it doesn’t make sense.<\/p>\n

Probably the biggest drawback, logistics-wise, to a video background is the fact that they look great on desktop but don’t transition to mobile well. And as we all know, mobile is critical for web design these days. One specific sticking point is that there’s not an easy way to make sure the video will do what it’s supposed to do when the site is squished down to a tiny screen. You’ll need to include some extra coding to make sure the video stays centered when it’s bigger than the container it’s in (which is going to happen on a mobile screen). If you’re committed to the video background, a potential workaround for mobile is to have a stand-in gif or image.<\/p>\n

Logistics aside, there are times (many times) when video just isn’t right for the site you’re working on.<\/p>\n

\"full-screen-video-background-camera\"<\/p>\n

This is particularly true when you consider the purpose of the site. It’s easy to get distracted by the shiny new prospect of a design project, but you must never lose sight of the purpose of the site.<\/span>\u00a0[twitter_link]Good design makes it easy for site visitors to do whatever they’re coming to the site to do.<\/span>[\/twitter_link] There are some sites \u2013 many sites, really \u2013 that shouldn’t have a minimalistic homepage, and there’s no real way to make a video background work without minimalist design overtop it. If stripping down the homepage elements makes it difficult for site visitors to do what they’re there to do, you need to avoid the video background for this one.<\/p>\n

If you’re on the fence, consider the site\u2019s primary audience. Are they impressed by slick design, or will it be more likely to confuse or annoy them?<\/p>\n

Final Thoughts on Video Backgrounds<\/h2>\n

While these have been around for a couple of years now, they certainly aren\u2019t passe. They can be an incredibly powerful design element for the right project, and these days, implementing them is easier than ever. But a full-screen video background is definitely not right for every project, so consider the purpose of the site you’re designing when you want to include a video background. If video will inhibit or detract from the site\u2019s overall purpose, it’s best to find an alternative. But if there’s room to make it work with a stripped-down design in the foreground, you’ve got room to create something with tremendous impact.<\/p>\n","protected":false},"excerpt":{"rendered":"

Looking for a web design feature that delivers massive impact with a hyper-cool appeal? Consider the full-screen video background. The full-screen video background is a really neat trick (when it\u2019s done well). But how do you know if it\u2019s the right feature for your site? Let\u2019s break down some of the reasons they\u2019re great, \u00a0and…<\/span><\/span><\/p>\n","protected":false},"author":297,"featured_media":17606,"template":"","resource-topic":[],"resource-role":[],"resource-type":[916],"class_list":["post-139691","resource","type-resource","status-publish","has-post-thumbnail","hentry"],"yoast_head":"\nA Few Things to Think About Before Using a Full-Screen Video Background | WP Engine<\/title>\n<meta name=\"description\" content=\"Consider important factors before using a full-screen video background on your website. Learn the pros and cons to make an informed decision when optimizing your website.\" \/>\n<meta name=\"robots\" content=\"noindex, follow\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"A Few Things to Think About Before Using a Full-Screen Video Background | WP Engine\" \/>\n<meta property=\"og:description\" content=\"Consider important factors before using a full-screen video background on your website. Learn the pros and cons to make an informed decision when optimizing your website.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wpengine.com\/case-studies\/resources\/a-few-things-to-think-about-before-using-a-full-screen-video-background\/\" \/>\n<meta property=\"og:site_name\" content=\"WP Engine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/wpengine\" \/>\n<meta property=\"article:modified_time\" content=\"2024-06-30T20:17:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2016\/07\/gravityforms-home-screenshots@2x-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1000\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@wpengine\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/a-few-things-to-think-about-before-using-a-full-screen-video-background\/\",\"url\":\"https:\/\/wpengine.com\/case-studies\/resources\/a-few-things-to-think-about-before-using-a-full-screen-video-background\/\",\"name\":\"A Few Things to Think About Before Using a Full-Screen Video Background | WP Engine\",\"isPartOf\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\"},\"datePublished\":\"2016-06-14T11:00:59+00:00\",\"dateModified\":\"2024-06-30T20:17:42+00:00\",\"description\":\"Consider important factors before using a full-screen video background on your website. Learn the pros and cons to make an informed decision when optimizing your website.\",\"breadcrumb\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/a-few-things-to-think-about-before-using-a-full-screen-video-background\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/wpengine.com\/case-studies\/resources\/a-few-things-to-think-about-before-using-a-full-screen-video-background\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/a-few-things-to-think-about-before-using-a-full-screen-video-background\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/wpengine.com\/case-studies\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Resources\",\"item\":\"https:\/\/wpengine.com\/case-studies\/resources\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"A Few Things to Think About Before Using a Full-Screen Video Background\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\",\"url\":\"https:\/\/wpengine.com\/case-studies\/\",\"name\":\"WP Engine\",\"description\":\"Managed Hosting for WordPress\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/3a22232b01de39dcf588fb8e421c0521\",\"name\":\"Erin Myers\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/cd881e115bc28c81642ec61752db9981ece9ee8b4c81498a9b6276b9cdcaf5e6?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/cd881e115bc28c81642ec61752db9981ece9ee8b4c81498a9b6276b9cdcaf5e6?s=96&d=mm&r=g\",\"caption\":\"Erin Myers\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"A Few Things to Think About Before Using a Full-Screen Video Background | WP Engine","description":"Consider important factors before using a full-screen video background on your website. Learn the pros and cons to make an informed decision when optimizing your website.","robots":{"index":"noindex","follow":"follow"},"og_locale":"en_US","og_type":"article","og_title":"A Few Things to Think About Before Using a Full-Screen Video Background | WP Engine","og_description":"Consider important factors before using a full-screen video background on your website. Learn the pros and cons to make an informed decision when optimizing your website.","og_url":"https:\/\/wpengine.com\/case-studies\/resources\/a-few-things-to-think-about-before-using-a-full-screen-video-background\/","og_site_name":"WP Engine","article_publisher":"https:\/\/www.facebook.com\/wpengine","article_modified_time":"2024-06-30T20:17:42+00:00","og_image":[{"width":1920,"height":1000,"url":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2016\/07\/gravityforms-home-screenshots@2x-1.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_site":"@wpengine","twitter_misc":{"Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/wpengine.com\/case-studies\/resources\/a-few-things-to-think-about-before-using-a-full-screen-video-background\/","url":"https:\/\/wpengine.com\/case-studies\/resources\/a-few-things-to-think-about-before-using-a-full-screen-video-background\/","name":"A Few Things to Think About Before Using a Full-Screen Video Background | WP Engine","isPartOf":{"@id":"https:\/\/wpengine.com\/case-studies\/#website"},"datePublished":"2016-06-14T11:00:59+00:00","dateModified":"2024-06-30T20:17:42+00:00","description":"Consider important factors before using a full-screen video background on your website. Learn the pros and cons to make an informed decision when optimizing your website.","breadcrumb":{"@id":"https:\/\/wpengine.com\/case-studies\/resources\/a-few-things-to-think-about-before-using-a-full-screen-video-background\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wpengine.com\/case-studies\/resources\/a-few-things-to-think-about-before-using-a-full-screen-video-background\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/wpengine.com\/case-studies\/resources\/a-few-things-to-think-about-before-using-a-full-screen-video-background\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wpengine.com\/case-studies\/"},{"@type":"ListItem","position":2,"name":"Resources","item":"https:\/\/wpengine.com\/case-studies\/resources\/"},{"@type":"ListItem","position":3,"name":"A Few Things to Think About Before Using a Full-Screen Video Background"}]},{"@type":"WebSite","@id":"https:\/\/wpengine.com\/case-studies\/#website","url":"https:\/\/wpengine.com\/case-studies\/","name":"WP Engine","description":"Managed Hosting for WordPress","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/3a22232b01de39dcf588fb8e421c0521","name":"Erin Myers","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/cd881e115bc28c81642ec61752db9981ece9ee8b4c81498a9b6276b9cdcaf5e6?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cd881e115bc28c81642ec61752db9981ece9ee8b4c81498a9b6276b9cdcaf5e6?s=96&d=mm&r=g","caption":"Erin Myers"}}]}},"acf":[],"grid_image_url":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2016\/07\/gravityforms-home-screenshots@2x-1-276x144.png","media-type":{"term_id":916,"name":"Article","slug":"article"},"role":false,"topic":false,"_links":{"self":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource\/139691","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource"}],"about":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/types\/resource"}],"author":[{"embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/users\/297"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/media\/17606"}],"wp:attachment":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/media?parent=139691"}],"wp:term":[{"taxonomy":"resource-topic","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-topic?post=139691"},{"taxonomy":"resource-role","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-role?post=139691"},{"taxonomy":"resource-type","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-type?post=139691"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}