Video Background with Vimeo Pro
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

I want to add a video background to a div tag, using a video from Vimeo.com.
I have a Vimeo Pro account. Sample: https://player.vimeo.com/video/76979871?background=1

NOTE: Vimeo pro lets me point to the exact video files urls (the files, mp4, etc, not an iframe) of any video I host. So if your solutions is using the video tag you can assume you have the file path to the mp4. I recommend not embedding iframes with a player, as this seems to cause many rendering browser issues.

I have already tried all libraries from Google's top results including Vide and jquery.mb.YTPlayer. All the libraries that I found are either a) Outdated (last commit 4 years ago) or b) Inconsistent (don't work cross browser) or c) lack features.

I need a solid solution with the following requirements:

Requirements:

  • Needs to work with Vimeo Pro (not Youtube).
  • Original div background should show while video is loading. The div background should be replaced by playing video after it has loaded.
  • On desktop and tablet devices => play video background.
  • On mobile => show fallback image always - do not play anything.
  • Audio should be muted.
  • Video should loop
  • Controls should be hidden and it should actually look as a video background (not a player on the background)
  • The video should be NOT clickable (user should not be able to pause the video / click on any ilnks on video of the player / etc). Some scripts do this by putting a div on top of the player. It should be a video background. Not a "fake" video background.
  • The video should have a repeat texture on top (like this one https://i.imgur.com/udYo851.png)
  • Ideally it would be nice to be able to specify start and end time for loop (would be nice, but not a condition for completing bounty).
  • No errors or warnings on Browser. Right now with current scripts on the market I am getting errors like: Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://www.youtube.com') does not match the recipient window's origin ('https://tbrogames.github.io'), etc. Also I am getting huge Chrome rendering bugs when using the jquery.mb.YTPlayer, as it seems that the iframe and the cross origin requests are creating some how rendering dom issues.
  • Works across all major browsers (IE 11-13, Firefox, Chrome, Safari), and mobile (by showing fallback image).
  • Your solution must be a JS LIBRARY. PLEASE DO NOT GIVE ME JUST A CONCEPT DEMO. I don't want that - there are so many concept codepens everywhere. I want a JS library that works with progressive enhancement that I can set the settings as explained above and it will build all necessary CSS and html markup for me, proven and tested to work with all given requirements on all browsers. If js is not loaded, fallback image should show (or normal div background) if js is loaded, and target is not mobile, background should be replaced by video background. You may assume jquery is on page. I want something like setVideoBackground(targetElement, settings) or $(target).setVideoBackground(settings);
  • Your solution should allow multiple video backgrounds on the same page (ensure you have non conflicting classes / ids)
  • I do not want to host the mp4 file on my own site to save bandwidth. If you need to use a mp4 file, you can grab the direct link offered by Vimeo Pro (the mp4 will be hosted at vimeo's site). If so, ensure there are no cross domain issues.

I can't find any one solid solution on the market.

BOUNTY: Find a perfect solution that meets all requirements or create it.

Might be useful:
https://help.vimeo.com/hc/en-us/articles/115011183028-Embedding-background-videos
https://help.vimeo.com/hc/en-us/articles/224823567-Direct-links

THANK YOU! :)

Come on guys! Give me a hand with this one. If anyone solves it in the next 24 hours I will award a 100% BONUS :)
georgefountain 5 months ago
What is the best practice on this field? What is the way most sites use to add video to a background?
georgefountain 5 months ago
awarded to Chlegou

Crowdsource coding tasks.

2 Solutions

Winning solution

Hi Mate :)

i have made a search, till i find this library, that display a video as backgrounds.

link: https://github.com/VodkaBears/Vide

demo: http://vodkabears.github.io/vide/

the library isn't maintained yet, but it seems working stable.

i have wrapped a demo, when you can integrate infinite videos in a single webpage.

link: https://codepen.io/chlegou/pen/NzZNVv

i used a default bootstrap theme for this demo.

link: https://getbootstrap.com/docs/4.1/examples/product/

NOTE: elements must have transparent background. otherwise, the video will be over hidden.

docs are in the github for more options ;)

have fun ;)

Hi there! Thanks for the answer. However.... I mentioned on the post "I have already tried all libraries from Google's top results including Vide and jquery.mb.YTPlayer"... Unfortunately I have already tried it. It has bugs. In addition it hasn't even reached version 1.0.. and has over 72 unsolved issues on git. Any other suggestion? :) Thanks
georgefountain 4 months ago
Could you upload a sample and give me links fot it, I will try with that.
Chlegou 4 months ago
Thanks for the comment :). But please provide other options of a more recent script or reasons why we should be using vide.js. I can't find any reference on stackoverflow or any blog recommmendations about it and it hasn't even reached v 1.0. Why do you recommend using it vs others? Are you sure it works on IE 11-13, Firefox, Safari, Chrome, Mac, PC, and mobile devices (displaying poster image)? Are you sure it creates no browser warnings on all devices and browsers ? We need a tested and proven professional solution...
georgefountain 4 months ago
I have tested out on my mobile, and working perfectly, displaying the poster image. I think we should give it's chance. Since it's old, doesn't mean it can't work. It also supports many video types, for single video instance. That's why I believed it's gonna work for us. Trust me and lets give it it's chance ;)
Chlegou 4 months ago
Are you sure? I think the "multiple video types" is a thing of the past. I think the only thing needed now is mp4. This is why I want a newer library. Unless you can research this, and probe it works on all browsers and devices..
georgefountain 4 months ago
Solution provided privately. Thanks Chelgou.
georgefountain 4 months ago
Hi, i will provide an UPDATED SOLUTION PRIVATELY, in less time
Chlegou 4 months ago

Hi again,

just to classify the bounty, here is the solution given privately to @georgefountain.

As mentioned in the bounty, this solution is based on updated plugin, not like the outdated one, videjs.

this plugin, has las commit 11day ago from the date posting for this bounty.

MB.Vimeo_Player plugin:

link: https://github.com/pupunzi/jquery.mb.vimeo_player

docs: https://github.com/pupunzi/jQuery.mb.vimeo_player/wiki/Documentation

demo: https://pupunzi.com/mb.components/mb.vimeo_player/demo/index.html

here is a solution, i have made, that includes 2 videos in single page. (limitted to 2 only, because to network consuming)

this solution, is based on last bounty solution, just changed the plugin, and wrapped two examples justify the plugin ability.

solution link: https://codepen.io/chlegou/pen/VBwEWr

NOTE: this plugin works only on vimeo videos!!

View Timeline