Use a Vimeo® video as background of your page

We are more and more experiencing the use of background videos on web pages; They are visually capturing our attention giving more informations about the content of the website then a text or an image can do.

There are two possible solution to add a video as background of a web page.

The first is using a self hosted video and make the coding to display it as background; you can easily find some examples on the web by googling; here is one on Codepen: Fullscreen HTML5 Page Background Video.

The other solution is tu use either Youtube or Vimeo as source for the video you want on your page.

What are the advantages on using Youtube or Vimeo videos instead of a self hosted one?

Well, both are the most powerful streaming platforms you can have and you’ll never be able to configure your server the same way 🙂 ; using them you don’t have to optimize the video yourself but they offers the right quality for each connection; you don’t have to upload heavy files to your server and you can use very long videos without any problems; you can use any public videos available on that platforms.

Youtube or Vimeo?

That depends on your intents… Both are performing and reliable but they are different for the target and for the community they refer to.
Here you can find a good article that explains the differences between them: YouTube vs. Vimeo, What’s the Difference?

Pros


YouTube

  • It’s the world’s most popular video sharing platform (1 billion unique views a month)
  • SEO is built in so you can be found the the content of the video
  • YouTube is owned by Google so often gets ranked in search results
  • YouTube currently accepts full HD videos (1080p) and even the new 4k (So Does Vimeo since January)
  • You can interact with your audience in comments
  • You can grow a following with the follow buttons
  • Annotations can be added within videos to lead people to act (CTA)
  • YouTube if completely FREE (unlimited hosting, bandwidth)
  • You can earn money through their TrueView Advertising program
  • The already huge community can take your video to new heights (viral?)

Vimeo

  • No advertising for viewers (no pre-roll ads)
  • Vimeo favors higher quality content (ie. displays what is great, not popular)
  • Higher quality contributors tend to post there
  • Customization of video player (logo, colors, thumbnails etc)
  • Can use own domain
  • Analytics is more detailed

Cons


YouTube

  • Competitors content or even ads can be displayed near yours
  • Public content and not as easily controlled or policed
  • Lack of customer service or support
  • YouTube comments are rarely well moderated and can detract from your content
  • The network is designed to keep people on site, so people are less likely to visit your website
  • Many businesses block YouTube videos internally

Vimeo

  • Significantly smaller audience, so less visibility
  • No Free accounts for business usage (minimum $17 per month)
  • Restrictions on storage based on plans
  • Google said to favor YouTube in search results

All those considerations on which platform to choose are not influencing what the two plug-ins I realized can do as both will display videos the same way. So if you want just publish the video as background of your web page both are valid hosting platform.


mb.vimeo_player

I already developed a plug-in that let you use a Youtube® video as background with many features to customize the behavior of the player, where it should be displayed, how it should go fullscreen and so on. Now I make available it also for videos stored on Vimeo® with almost the same features of the Youtube one.

The mb-vimeo_player plug-in is available either as a pure javascript or as a free WordPress plug-in. There’s also the WordPress “Plus” version available for just 8€ that let you enable all the features to control the aspect and the behavior of it.

Why should you use it?

Coding this behavior yourself is not so easy and you’ll find many steps on the process that will make you crazy as they made me :-).
Using my javascript library or the WordPress plug-in make really easy the result in few steps and with a great effort.

Take a look to the demo page to check if this is what you were looking for or download the free WordPress version to test it and eventually buy the “Plus” version to use all the feature available.